aboutsummaryrefslogtreecommitdiff
path: root/themes/docsy/userguide/content/en/docs/Getting started
diff options
context:
space:
mode:
authorDimitri Staessens <[email protected]>2019-10-06 21:10:46 +0200
committerDimitri Staessens <[email protected]>2019-10-06 21:10:46 +0200
commit568553394d0a8b34668a75c9839a0f1f426469b2 (patch)
tree175c08844f05611b059ba6900fb6519dbbc735d2 /themes/docsy/userguide/content/en/docs/Getting started
parentd5d6f70371958eec0679831abd283498ff2731e5 (diff)
downloadwebsite-568553394d0a8b34668a75c9839a0f1f426469b2.tar.gz
website-568553394d0a8b34668a75c9839a0f1f426469b2.zip
theme: Switch to docsy theme
Diffstat (limited to 'themes/docsy/userguide/content/en/docs/Getting started')
-rwxr-xr-xthemes/docsy/userguide/content/en/docs/Getting started/_index.md267
1 files changed, 267 insertions, 0 deletions
diff --git a/themes/docsy/userguide/content/en/docs/Getting started/_index.md b/themes/docsy/userguide/content/en/docs/Getting started/_index.md
new file mode 100755
index 0000000..52f1c3d
--- /dev/null
+++ b/themes/docsy/userguide/content/en/docs/Getting started/_index.md
@@ -0,0 +1,267 @@
+
+---
+title: "Getting Started"
+linkTitle: "Getting Started"
+weight: 2
+date: 2018-07-30
+description: >
+ This page tells you how to get started with the Docsy theme, including installation and basic configuration.
+---
+
+
+## Prerequisites and installation
+
+### Install Hugo
+
+You need a [recent **extended** version](https://github.com/gohugoio/hugo/releases) (we recommend version 0.53 or later) of [Hugo](https://gohugo.io/) to do local builds and previews of sites (like this one) that use Docsy. If you install from the release page, make sure to get the `extended` Hugo version, which supports [SCSS](https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html); you may need to scroll down the list of releases to see it.
+
+For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/).
+
+#### Linux
+
+Do **not** use `sudo apt-get install hugo`, as it currently doesn't get you the `extended` version.
+
+If you've already installed Hugo, check your version:
+
+```
+hugo version
+```
+If the result is `v0.52` or earlier, or if you don't see `Extended`, you'll need to install the latest version.
+
+1. Go to the [Hugo releases](https://github.com/gohugoio/hugo/releases) page.
+2. In the most recent release, scroll down until you find a list of
+ **Extended** versions.
+3. Download the latest extended version (`hugo_extended_0.5X_Linux-64bit.tar.gz`).
+4. Create a new directory:
+
+ mkdir hugo
+
+5. Extract the files you downloaded to `hugo`.
+
+6. Switch to your new directory:
+
+ cd hugo
+
+7. Install Hugo:
+
+ sudo install hugo /usr/bin
+
+#### macOS
+
+Install Hugo using [Brew](https://gohugo.io/getting-started/installing/#homebrew-macos).
+
+### Install PostCSS
+
+To build or update your site's CSS resources, you also need [`PostCSS`](https://postcss.org/) to create the final assets. If you need to install it, you must have a recent version of [NodeJS](https://nodejs.org/en/) installed on your machine so you can use `npm`, the Node package manager. By default `npm` installs tools under the directory where you run `npm install`:
+
+```
+sudo npm install -D --save autoprefixer
+sudo npm install -D --save postcss-cli
+```
+
+You can also install these tools globally on your computer:
+
+```bash
+sudo npm install -g postcss-cli
+sudo npm install -g autoprefixer
+```
+
+You can find out more about the pros and cons of local and global package installation in [npm Global or Local Packages](https://flaviocopes.com/npm-packages-local-global/).
+
+## Using the theme
+
+To use the Docsy Hugo theme, you have a couple of options:
+
+* **Copy and edit the source for the [Docsy example site](https://github.com/google/docsy-example).** This approach gives you a skeleton structure for your site, with top-level and documentation sections and templates that you can modify as necessary. The example site uses Docsy as a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), so it's easy to [keep up to date](#keeping-the-theme-up-to-date).
+* **Build your own site using the Docsy theme.** Specify the [Docsy theme](https://github.com/google/docsy) like any other [Hugo theme](https://gohugo.io/themes/) when creating or updating your site. With this option, you'll get Docsy look and feel, navigation, and other features, but you'll need to specify your own site structure.
+
+### Option 1: Clone the Docsy example site
+
+The [Example Site](https://example.docsy.dev) gives you a good starting point for building your docs site and is
+pre-configured to use the Docsy theme as a Git submodule. You can clone the Example Site either by:
+
+* [Using the GitHub UI](#using-the-github-ui)
+* [Using the command line](#using-the-command-line)
+
+#### Using the GitHub UI
+
+<!--This is the simplest approach, as the Docsy example site repo is a [template repository](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/). To create your own copy of the Docsy example site repo:
+
+1. Go to the [repo page](https://github.com/google/docsy-example) and click **Use this template**.
+
+1. Type your chosen name for your new repository in the **Repository name** field. You can also add an optional **Description**.
+
+1. Click **Create repository from template** to create your new repository. Congratulations, you now have a Docsy site repo!
+
+1. To test your copied site locally with Hugo, or make local edits, you'll also need to make a local copy of your new repository. To do this, use `git clone`, replacing `https://github.com/my/example.git` with your repo's web URL (don't forget to use `--recurse-submodules` or you won't pull down some of the code you need to generate a working site):
+
+ <pre>
+ git clone --recurse-submodules --depth 1 <em>https://github.com/my/example.git</em>
+ </pre>
+
+You can now edit your local versions of the site's source files. To preview your site, go to your site root directory and run `hugo server`. By default, your site will be available at http://localhost:1313/. To push changes to your new repo, go to your site root directory and use `git push`.-->
+
+Note that the following approach [forks](https://help.github.com/en/articles/fork-a-repo) our repo and so creates a connection in GitHub between your project repo and the Docsy example site project repo - our project will be the "upstream" version of your site project:
+
+1. In the [the Docsy example site's GitHub repo](https://github.com/google/docsy-example), click **Fork** and follow the prompts.
+1. Rename your new fork:
+ 1. Click **Settings**, and type a new name in the **Repository name** field.
+ 1. Click **Rename** to save your changes.
+1. Get the web URL for cloning your site repo by clicking **Clone or download** on its main repo page.
+1. Make your own local working copy of your repo using `git clone`, replacing `https://github.com/my/example.git` with your repo's web URL:
+
+ <pre>
+ git clone --recurse-submodules --depth 1 <em>https://github.com/my/example.git</em>
+ </pre>
+
+You can now edit your local versions of the site's source files. To preview your site, go to your site root directory and run `hugo server`. By default, your site will be available at http://localhost:1313/. To push changes to your new repo, go to your site root directory and use `git push`.
+
+
+#### Using the command line
+
+To copy the example site:
+
+1. Make a local working copy of the example site directly using `git clone`:
+
+ git clone https://github.com/google/docsy-example.git
+
+1. Switch to the root of the cloned project, for example:
+
+ cd docsy-example
+
+1. Get local copies of the project submodules so you can build and run your site locally:
+
+ git submodule update --init --recursive
+
+1. Build your site:
+
+ hugo server
+
+1. Preview your site in your browser at: http://localhost:1313/. You can use `Ctrl + c` to stop the Hugo server whenever you like.
+
+1. Now that you have a site running, you can push it to a new repository:
+
+ 1. [Create a new repository in GitHub](https://help.github.com/en/articles/create-a-repo)
+ for your site with your chosen repo name. For clarity you may also want to rename the root
+ directory (`docsy-example`) of your working copy to match, though everything will still
+ work even if you don't.
+
+ 1. Configure
+ [`origin`](https://help.github.com/en/articles/configuring-a-remote-for-a-fork)
+ in your project. From your site's root directory, set the URL for `origin` to your new
+ repo (otherwise you'll be trying to push changes to `google/docsy` rather than to your repo):
+
+ git remote set-url origin https://github.com/MY-SITE/EXAMPLE.git
+
+
+ 1. Verify that your remote is configured correctly by running:
+
+ git remote -v
+
+
+ 1. Push your Docsy site to your repository:
+
+ git push -u origin master
+
+### Option 2: Use the Docsy theme in your own site
+
+Specify the [Docsy theme](https://github.com/google/docsy) like any other Hugo theme when creating or updating your site. This gives you all the theme-y goodness but you'll need to specify your own site structure. You can either use the theme as a submodule (our recommended approach for easy updates), or just clone the theme into your project's `themes` subdirectory.
+
+Whichever approach you use, for simplicity we recommend copying and editing our [example site configuration](#configuring-your-site) for your project, or you may get Hugo errors for missing parameters and values when you try to build your site.
+
+#### Using the Docsy theme as a submodule
+
+Adding Docsy as a Git submodule is our recommended approach for using the theme, as it means your project
+always refers to the Docsy repo version at your chosen revision, rather than you having your own copy in
+your repo that may result in merge conflicts when you try to update it. This is the approach used by our
+[example project](https://github.com/google/docsy-example).
+
+
+To create a new Hugo site project and then add the Docs theme as a submodule, run the following commands from your project's root directory.
+
+```shell
+hugo new site myproject
+cd myproject
+git init
+git submodule add https://github.com/google/docsy.git themes/docsy
+echo 'theme = "docsy"' >> config.toml
+git submodule update --init --recursive
+```
+
+To add the Docsy theme to an existing site, run the following commands from your project's root directory:
+
+```
+git submodule add https://github.com/google/docsy.git themes/docsy
+echo 'theme = "docsy"' >> config.toml
+git submodule update --init --recursive
+```
+
+#### Cloning the Docsy theme to your project's `themes` subdirectory
+
+If you don't want to use a submodules (for example, if you want to customize and maintain your own copy of the theme directly, or your deployment choice requires you to include a copy of the theme in your repository), you can clone the theme into your project.
+
+
+
+
+To clone Docsy into your project's `theme` folder, run the following commands from your project's root directory:
+
+```
+cd themes
+git clone https://github.com/google/docsy
+```
+
+For more information, see [Install and Use Themes](https://gohugo.io/themes/installing-and-using-themes/#install-a-single-theme) on the [Hugo](https://gohugo.io) site.
+
+#### Preview your site
+
+To build and preview your site locally:
+
+```
+cd myproject
+hugo server
+```
+
+By default, your site will be available at http://localhost:1313/.
+
+## Basic site configuration
+
+Site-wide configuration details and parameters are defined in your project's `config.toml` file. These include your chosen Hugo theme (Docsy, of course!), project name, community links, Google Analytics configuration, and Markdown parser parameters. See the examples with comments in [`config.toml` in the example project](https://github.com/google/docsy-example/blob/master/config.toml) for how to add this information. **We recommend copying this `config.toml` and editing it even if you're just using the theme and not copying the entire Docsy example site**.
+
+The Docsy example site comes with some defaults you may want to remove or customize straight away:
+
+### Internationalization
+
+The Docsy example site supports content in English and Norwegian. You can find out more about how Docsy supports multi-language content in [Multi-language support](/docs/language/_index.md).
+
+If you don't intend to translate your site to Norwegian, you can remove the language switcher by removing the following lines from `config.toml`:
+
+```
+[languages.no]
+title = "Docsy"
+description = "Docsy er operativsystem for skyen"
+languageName ="Norsk"
+contentDir = "content/no"
+```
+
+To remove the translated source files, delete the `docsy-example/content/no` directory.
+
+### Search
+
+By default, the Docsy example site uses its own [Google Custom Search Engine](https://cse.google.com/cse/all). To disable site search, delete or comment out the following lines:
+
+```
+# Google Custom Search Engine ID. Remove or comment out to disable search.
+gcs_engine_id = "011737558837375720776:fsdu1nryfng"
+```
+
+To use your own Custom Search Engine, replace the value in the `gcs_engine_id` with the ID of your own search engine.
+
+
+## What's next?
+
+* [Add content and customize your site](/docs/adding-content/)
+* Get some ideas from our [Example Site](https://github.com/google/docsy-example) and other [Examples](/docs/examples/).
+* [Publish your site](/docs/deployment/).
+
+
+