Shulou(Shulou.com)06/02 Report--

How to use VuePress + Github Pages to build a blog, in view of this problem, this article introduces the corresponding analysis and answers in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

0. VuePress

VuePress needless to say, the static website generator based on Vue is simple in style and simple in configuration. The reason for not using VitePress is that you want to use an existing theme, and VitePress is not compatible with the current VuePress ecosystem, so why not choose VuePress@next, considering that it is still in the Beta stage and wait until it is stable before starting the migration.

1. Local building

Start quickly with the VuePress official website:

1. Create and enter a new directory

/ / File name Custom mkdir vuepress-starter & & cd vuepress-starter

2. Initialize using your favorite package manager

Yarn init # npm init

3. Install VuePress as a local dependency

Yarn add-D vuepress # npm install-D vuepress

4. To create your first document, VuePress will use docs as the document root, so this README.md is equivalent to the home page:

Mkdir docs & & echo'# Hello VuePress' > docs/README.md

5. Add some scripts to package.json

{"scripts": {"docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs"}}

6. Start the server locally

Yarn docs:dev # npm run docs:dev

VuePress starts a hot and overloaded development server in http://localhost:8080 (opens new window).

two。 Basic configuration

Create a .vuepress directory under the documentation directory, where all VuePress-related files will be placed. At this point, your project structure may look like this:

. ├─ docs │ ├─ README.md │ └─ .vuepress │ └─ config.js └─ package.json

Add config.js under the .vuepress folder and configure the title and description of the website to facilitate SEO:

Module.exports = {title: 'TypeScript4 document', description: 'TypeScript4 latest official document Translation'}

The interface is similar to:

3. Add a navigation bar

We now add a navigation bar in the upper-right corner of the top page to modify the config.js:

Module.exports = {title: '...', description: '...', themeConfig: {nav: [{text: 'home', link:'/'}, {text: 'JavaScript blog', items: [{text: 'Github'' Link: 'https://github.com/mqyqingfeng'}, {text:' Nuggets', link: 'https://juejin.cn/user/712139234359182/posts'}]}

The effect is as follows:

For more configuration, refer to the VuePress navigation bar:

Https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

4. Add a sidebar

Now let's add some md documents, which are currently in the following directory:

.├─ docs │ ├─ README.md │ └─ .vuepress │ └─ config.js | └─ handbook | └─ ConditionalTypes.md | └─ Generics.md └─ package.json

Our configuration in config.js is as follows:

Module.exports = {themeConfig: {nav: [...], sidebar: [{title: 'welcome to learn', path:'/', collapsable: false, / / do not collapse children: [{title: "must read before school" Path: "/"}]}, {title: "basic Learning", path:'/ handbook/ConditionalTypes', collapsable: false, / / do not collapse children: [{title: "conditional Type", path: "/ handbook/ConditionalTypes"} {title: "generic", path: "/ handbook/Generics"}],}]}}

The corresponding effects are as follows:

5. Change the theme

Now the basic directory and navigation functions have been implemented, but if I still want to load loading, switch animation, switch mode (dark mode), return to the top, comment, and so on, we can use the theme directly to simplify the development cost. The theme used here is vuepress-theme-rec (https://vuepress-theme-reco.recoluan.com/):

Now let's install vuepress-theme-reco:

Npm install vuepress-theme-reco-save-dev# oryarn add vuepress-theme-reco

Then reference the topic in config.js:

Module.exports = {/ /... Theme: 'reco' / /...}

After refreshing the page, we will find some changes in details, such as the loading animation when loading and the support for switching to dark mode:

6. Add article information

However, we will also find that, for an article like conditional type, the conditional type (Conditional Types) appears twice, because this topic automatically extracts the first headline as the title of this article, and we can add some information modifications to the md file of each article:

-title: conditional type author: Meiyu date: '2021-12-12 Murray-

The effect of the article at this time is as follows:

But if you don't want the title, author, and time, we can hide it in the style, which we'll talk about later.

7. Set language

Note that the article time in the figure above is in the format of 2021-12-12, but it shows 12-12-12. This is because the default lang of VuePress is en-US. Let's modify the config.js:

Module.exports = {/ /... Locales: {'/': {lang: 'zh-CN'}}, / /...}

You can find that time has been displayed in a different way:

8. Open directory structure

In the original topic, we found that the directory structure of each article appears on the left:

Vuepress-theme-reco removes the multi-level title from the original sidebar to generate a sub-sidebar, which is placed on the right side of the page. If you want to enable it globally, you can set it in the page config.js:

Module.exports = {/ /... ThemeConfig: {subSidebar: 'auto'} / /...}

The effect is as follows:

9. Modify theme color

VuePress is based on Vue, so the theme color is the green of Vue, while the official color of TypeScript is blue, so how to modify the theme color of VuePress?

You can create a .vuepress / styles/palette.styl file with the following code:

$accentColor = # 3178c6

At this point you can see that the theme color has changed:

More color modifications refer to VuePress's palette.styl.

10. Custom modification styl

What if you want to customize and modify the style of some DOM elements? For example, in dark mode:

We found that the color of the text used for emphasis is dim and can't be seen clearly in dark mode. I want to change the color and background color of this text?

VuePress provides an easy way to add extra styles. You can create a .vuepress / styles/index.styl file. This is a Stylus file, but you can also use normal CSS syntax.

We create this directory under the .vupress folder, and then create the index.styl file as follows:

/ / pass the check to see the element style declaration. Dark .content _ _ default code {background-color: rgba; color: # fff;}

At this point, the text is much clearer:

What we mentioned earlier about hiding the title, author, and time of each article is actually a similar way:

.page. Page-title {display: none;}

The final effect is as follows:

11. Deployment

Even if our blog is officially done, we will deploy it to the free Github Pages. We build a new warehouse on Github, and here I get the warehouse name: learn-typescript.

Accordingly, we need to add a base path configuration in config.js:

Module.exports = {/ / path name is "/ /" base:'/ learn-typescript/', / /.}

The final config.js file is as follows:

Module.exports = {title: 'TypeScript4 document', description: 'TypeScript4 latest official document translation', base:'/ learn-typescript/', theme: 'reco', locales: {' /': {lang: 'zh-CN'}}, themeConfig: {/ / lastUpdated:' last update', subSidebar: 'auto' Nav: [{text: 'home', link:'/'}, {text: 'JavaScript blog of Yuanyu', items: [{text: 'Github', link:' https://github.com/mqyqingfeng'}, {text: 'Nuggets' Link: 'https://juejin.cn/user/712139234359182/posts'}]}], sidebar: [{title:' welcome to learn', path:'/', collapsable: false Children: [{title: "pre-school must read", path: "/"}]}, {title: "basic learning", path:'/ handbook/ConditionalTypes', collapsable: false Children: [{title: "conditional type", path: "/ handbook/ConditionalTypes"}, {title: "generic", path: "/ handbook/Generics"}],}]}}

Then we set up a script file under the project vuepress-starter directory: deploy.sh, and make sure to modify the corresponding user name and warehouse name:

#! / usr/bin/env sh# ensure that the script throws errors encountered set-e# generates a static file npm run docs:build# into the generated folder cd docs/.vuepress/distgit initgit add-Agit commit-m 'deploy'# if published to https://.github.io/git push-f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pagescd-

Then switch the command line to the vuepress-starter directory, execute sh deploy.sh, and then start the construction, and then submit it to the remote warehouse. Notice that it is submitted to the gh-pages branch. Let's check the code of the corresponding warehouse branch:

We can see the final address in the Settings-> Pages of the warehouse:

At this point, we have completed the deployment of VuePress and Github Pages.

This is the answer to the question about how to use VuePress + Github Pages to build a blog. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.