Commit c076e237 authored by Ben Hong's avatar Ben Hong

content (#34): Add more site configuration guides

parent ace85585
......@@ -292,15 +292,103 @@ title: My Custom Title to Override the H1
# My Heading One That Turns into a Title
```
You'll want to checkout `./src/.vuepress/config.js` if you want to update the following information:
- Site Title
- Google Analytics ID
- Repo Location
- Repo Label in Navigation
- Edit Page Link Text
- Top Navigation
- Favicon: Use [favicon-generator.org](https://www.favicon-generator.org/) to generate icons and simply replace all the files in `./src/.vuepress/public` and your favicon should just show up!
### Google Analytics
Odds are pretty good that you'd like to do some metric tracking for visitors to your blog and such. So luckily it's really easy to add your Google Analytics ID:
1. Login to your Google Analytics account
2. Create a new account for your site if you haven't already
3. Visit the `Admin` section of your account
4. Look for `Tracking Info` > `Tracking Code`
5. Copy the tracking ID to the clipboard:
- It should look something like `UA-12345678-1`
6. Open `./src/.vuepress/config.js` in your favorite text editor
7. Update the `ga` property with your tracking ID
```js{3}
module.exports = {
title: 'My New VuePress Blog',
ga: 'UA-12345678-1'
...
}
```
### Favicon
Everything is already configured for favicons on your page. All you need to do is:
1. Use [favicon-generator.org](https://www.favicon-generator.org/) to generate the appropriate files for favicons
2. Replace all the files in `./src/.vuepress/public` and your favicon should just show up!
::: tip
In the event you need to manually modify the HTML elements related to favicon can be found in `./src/.vuepress/config.js` under the `head` key.
```js
module.exports = {
head: [
[
'link',
{
rel: 'apple-touch-icon',
sizes: '57x57',
href: '/apple-icon-57x57.png'
}
],
...
]
}
```
:::
### Site Repository
Given that VuePress is designed to optimize for technical documentation, the default theme has a priority to make the repository as easy to as access as possible.
#### Site Nav Item
When you start up your environment, you'll notice that the main navigation has the repo in the upper right. It's configured in `./src/.vuepress/config.js`:
```js{6-7}
module.exports = {
title: 'My New VuePress Blog',
ga: '',
dest: './public',
themeConfig: {
repo: 'https://wwww.github.com',
repoLabel: 'Repo'
},
...
}
```
- `themeConfig.repo`: This is the link that (1) determines whether the nav item displays and (2) Serves as the foundation for the Edit Links feature.
- `themeConfig.repoLabel`: The default is the hosting provider (i.e., GitLab or GitHub), but I think that's misleading from a semantic perspective since the user is going to your repo and not the company site "GitLab" or "GitHub". So I'm recommending "Repo" as an alternative.
#### Edit Links
Another great feature about VuePress is the ability to allow users to easily submit PRs to the page. That is configured here in `./src/.vuepress/config.js`:
```js{8-9}
module.exports = {
title: 'My New VuePress Blog',
ga: '',
dest: './public',
themeConfig: {
repo: 'https://wwww.github.com',
repoLabel: 'Repo',
editLinks: true,
editLinkText: 'Found a bug? Help me improve this page!',
},
...
}
```
- `themeConfig.editLinks`: This is turned off by default, but by adding this in with the boolean of true, it will generate the default text of "Edit this page" on the bottom of each page
- `themeConfig.editLinkText`: This override the default text generated by `themeConfig.editLinks`
::: warning
If the `themeConfig.repo` is not filled in, this feature will not work since it uses the repo link to generate the proper links.
:::
## Architecture
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment