preface

Hanbook, the latest official TypeScript document, has been translated into 14 articles, making it one of the best TypeScript tutorials in the country. For your convenience, I set up a blog with VuePress + Github Pages. The blog effect is as follows:

The blog address is as follows:

  • Making mqyqingfeng. Making. IO/learn – types…
  • Gitee mqyqingfeng. Gitee. IO/learn – types…

0. VuePress

Needless to say, VuePress is a vuUe-based static website generator with minimal style and simple configuration. The reason why I don’t use VitePress is because I want to use the existing theme, while VitePress is not compatible with the current VuePress ecosystem. As for why I don’t choose VuePress@next, considering that it is still in the Beta stage, I will start the migration after it is stable.

1. Set up a local server

Quick start with VuePress website:

  1. Create and enter a new directory
// File name user-defined mkdir vuepress-starter && CD vuepress-starterCopy the code
  1. Initialize using your favorite package manager
yarn init # npm init
Copy the code
  1. Install VuePress as a local dependency
yarn add -D vuepress # npm install -D vuepress
Copy the code
  1. To create your first document, VuePress uses docs as the document root, so this readme.md is equivalent to the home page:
mkdir docs && echo '# Hello VuePress' > docs/README.md
Copy the code
  1. Add some scripts to package.json
{
  "scripts": {
    "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"}}Copy the code
  1. Start the server locally
yarn docs:dev # npm run docs:dev
Copy the code

VuePress launches a hot-loaded development server at http://localhost:8080 (opens New Window).

2. Perform basic configurations

Create a.vuepress directory under the documents directory, where all vuepress-related files will be stored. Your project structure might look like this:

.├ ─ ├─ download.txt ├─ download.txt ├─ download.txtCopy the code

Add config.js to the.vuepress folder to configure the title and description of the site for SEO:

module.exports = {
  title: 'TypeScript4 document'.description: 'TypeScript4 Latest official document Translation '
}
Copy the code

The interface is similar to:

3. Add a navigation bar

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

module.exports = {
    title: '... '.description: '... '.themeConfig: {
        nav: [{text: 'home'.link: '/' },
            { 
                text: 'Hu Hu's JavaScript blog'.items: [{text: 'Github'.link: 'https://github.com/mqyqingfeng' },
                    { text: 'the nuggets'.link: 'https://juejin.cn/user/712139234359182/posts'}]}}Copy the code

The effect is as follows:

For more information, see the VuePress navigation bar.

4. Add sidebars

Now let’s add some MD documents. The current directory of the documents is as follows:

. ├ ─ docs │ ├ ─ README. Md │ └ ─. Vuepress │ └ ─ config. Js | └ ─ faced | └ ─ ConditionalTypes. Md | └ ─ Generics. Md └ ─ package.jsonCopy the code

Our configuration in config.js is as follows:

module.exports = {
    themeConfig: {
        nav: [...]. .sidebar: [{title: 'Welcome to study'.path: '/'.collapsable: false./ / not folded
                children: [{title: "Pre-school required reading.".path: "/"}]}, {title: "Basic learning".path: '/handbook/ConditionalTypes'.collapsable: false./ / not folded
              children: [{title: "Condition type".path: "/handbook/ConditionalTypes" },
                { title: "Generic".path: "/handbook/Generics"}],}]}}Copy the code

The corresponding effect is as follows:

5. Change the theme

Now the basic directory and navigation functions are in place, but what if I still want to load loading, toggle animations, mode-toggle (dark mode), go back to the top, comment, etc. To simplify the development cost, we can use themes directly. The theme used here is vuepress-theme-rec:

Now we install vuepress-theme-reco:

npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
Copy the code

Then reference the theme in config.js:

module.exports = {
  // ...
  theme: 'reco'
  // ...
}  
Copy the code

Refresh the page and we’ll see some details like loading animations and support for switching to dark mode:

6. Add article information

However, we can also find that Conditional Types appear twice in an article like Conditional type, because this subject automatically extracts the first major heading as the title of the article, and we can add some information modification in the MD file of each article:

-- Title: conditional type author: Hu Date: '2021-12-12' --Copy the code

The effect of this article is as follows:

But if you don’t want the title, the author, and the date, we can hide it in styles, which we’ll talk about later.

7. Set language

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

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'}},// ...
}  
Copy the code

It can be found that time is displayed in a different way:

8. Enable the directory structure

In the original theme, we find the table of contents structure for each article on the left:

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

module.exports = {
  / /...
  themeConfig: {
    subSidebar: 'auto'
  }
  / /...
}
Copy the code

The effect is as follows:

9. Change the theme color

VuePress is Vue based, so the theme color is Vue green, whereas TypeScript’s official color is blue. How do you change the theme color of VuePress?

. You can create a vuepress/styles/the palette styl file, the file code is as follows:

$accentColor = #3178c6
Copy the code

Now you can see that the theme color has changed:

For more color changes, see Palette. Styl in VuePress.

10. Customize modification styles

What if you want to customize 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 it is not clear in the dark mode. I would like to change the color of this text and the background color?

VuePress provides an easy way to add additional 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:

// Check to see the element style declaration.dark .content__default code {
    background-color: rgba(58.58.92.0.7);
    color: #fff;
}
Copy the code

Now the text is much clearer:

Hiding the title, author, and date of each post is a similar approach:

.page .page-title {
   display: none;
}
Copy the code

The final effect is as follows:

Deployment of 11.

With our blog officially done, we deployed it to the free Github Pages. Let’s create a new repository on Github. Here I get the repository name: learn-typescript.

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

module.exports = {
  	// The path name is "/
      
       /"
      
    base: '/learn-typescript/'./ /...
}
Copy the code

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: 'lastUpdated ',
        subSidebar: 'auto'.nav: [{text: 'home'.link: '/' },
            { 
                text: 'Hu Hu's JavaScript blog'.items: [{text: 'Github'.link: 'https://github.com/mqyqingfeng' },
                    { text: 'the nuggets'.link: 'https://juejin.cn/user/712139234359182/posts'}}]].sidebar: [{title: 'Welcome to study'.path: '/'.collapsable: false.children: [{title: "Pre-school required reading.".path: "/"}]}, {title: "Basic learning".path: '/handbook/ConditionalTypes'.collapsable: false.children: [{title: "Condition type".path: "/handbook/ConditionalTypes" },
                { title: "Generic".path: "/handbook/Generics"}],}]}}Copy the code

Then create a script file in the vuepress-starter directory: deploy.sh.

#! /usr/bin/env sh

#Make sure the script throws any errors it encounters
set -e

#Generating static files
npm run docs:build

#Go to the generated folder
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

#If posted to https://
      
       .github. IO /
       
      
git push -f [email protected]:mqyqingfeng/learn-typescript.git master:gh-pages

cd -
Copy the code

Vuepress-starter: vuepress-starter: vuepress-starter: vuepress-starter: vuepress-starter: vuepress-starter: vuepress-starter: vuepress-starter

We can see the last address in Settings -> Pages of the repository:

As my last address is generated mqyqingfeng. Making. IO/learn – types…

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

series

Catalogue address: github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.