Usually when Google search questions, many programs are linked to the blog, there are Jane book, blog garden, si Fu and so on, of course, there are many personal blogs, different styles. Slowly, oneself had the idea that builds blog from oneself again, it is the study record that steps pit as oneself work, both in case which day also can help others to solve what problem, isn’t beautiful zai

Selected VuePress

I also considered Hexo, which is also a popular blog building tool, but I also wanted to take this opportunity to learn about new technologies. VuePress was recommended by a leader in a technology exchange group I was in. After learning about it, I really like it.

  • Get started easily, configuration is simple
  • Vue driver, enjoy Vue+ Webpack development environment, you can customize Vue components
  • Performance and efficient

In fact, the advantages of the above official website are introduced, I am more recognized, repeat again

For more information, please visit VuePress Chinese website

Start the installation

Install VuePress globally
yarn global add vuepress NPM install -g vuepress
Copy the code

In order to save trouble and save time to rebuild the whole project, clone the whole project from the official website demo and modify it later according to your own situation

# CD to the folder where you want to save your blog and clone it
git clone [email protected]:docschina/vuepress.git
Copy the code

Start debugging

cdVuepress // Go to the project root directory yarn // The installation depends on yarn dev/to start the debugging serviceCopy the code

VuePress Dev Server listening at http://localhost:8080/ indicates that the project has been successfully debugged. You can preview the entire blog project by typing http://localhost:8080/ in your browser

Modify the project structure

Your project structure should look something like this

.├ ─.vuepress │ ├── ├─ config.js │ ├─ ├─ ├─ ├─ ├─ public │ ├─ ├─ ├.js ├─ config │ ├─ ├─ download.md │ ├─ download.md │ ├─ download.md │ ├─ download.md │ ├─ download.md │ ├─ download.md │ ├─ download.md │ ├─ Basic-config.md │ ├── Self-exercises. Md │ ├── self-exercises. Md │ ├── self-exercises Using - vue. Md ├ ─ ─ useful / / we need Chinese configuration | ├ ─ ─ the README. Md / / home page configuration file │ ├ ─ ─ the config │ ├ ─ ─ the default theme - config │ └ ─ ─ guide └ ─ ─ Readme. md // Home page configuration fileCopy the code

Since we have a Chinese interface, we do not consider English, so we can directly move all files in the zh folder to the upper directory, overwrite the original guide, default-theme-config, config, and the home configuration file readme. md should be this directory structure

.├ ─.vuepress │ ├─ ├─ config.js │ ├─ public ├─ config │ ├─ default theme-config ├─ ├─ exercises, ├─ exercises, exercises, exercises, exercises Md │ ├── Basic-config. md │ ├── custom-themes.md │ ├── Deploy ├── Exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercisesCopy the code

Basic Website Configuration

In the config.js file of.vuepress, the title, description and other basic information of the website are included

Just to list some of them, I did not leave the original ones, attached are my modified ones

module.exports = {
  dest: 'vuepress'// Set the vuepress folder locales: {// language configuration in the root directory'/': {
      lang: 'zh-CN',
      title: 'devZhang', //'Something Good Will Be Happen! '}}, head: [// Additional tags added to the current page <head> tag [// additional tags added to the current page <head> tag ['link', { rel: 'icon', href: `/logo.png` }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '# 000000' }]
  ],
  serviceWorker: true, // VuePress supports PWA configuration theme:'vue'// Theme fileCopy the code

Using the serviceWorker configuration above, the public manifest.json configuration ICONS are used.

Configuring the Home Page

The readme. md file in.docs is the homepage configuration file. Here are some of the things I kept and deleted

---
home: trueHeroImage: /alone. PNG/actionText: Go Blog→ // Home button text actionLink: /js/ // click home button link path --Copy the code

My home page effect display:

Configuring the Site structure

Below is my revised website structure based on the official Demo for your reference

themeConfig: {
    repo: 'dvxiaofan', // Github name, can be added parameters (/ project name), directly to the project. Just write the username to go directly to your Github homepage editLinks:false// Whether to view original text and edit at the bottom of each articlefalse
    docsDir: 'docs', locales: {// Navigation bar configuration at the top of the site'/': {
        nav: [
          {
            text: 'the Web front end'// Display the name items: [// there is a secondary directory below, so set {text:'JS',
                link: '/js/'
				},
              	{
                 text: 'CSS',
                 link: '/css/'
               },
               {
                 text: 'HTML',
                 link: '/html/'
               },
					]
					},
					{
						text: 'the wheel',
						items: [
							{
                			text: 'Echarts',
                			link: '/echarts/'
							},
              			{
                			text: 'Vue',
                			link: '/vue/'
              			},              
						]
					},
          {
            text: 'Essays on Life',
            link: '/lifes/'
          },
          {
            text: 'about',
            link: '/about/'}, sidebar: {// sidebar configuration'/js/': jsSidebarConfig(JS 'relevant'),}}}}} // Sidebar configuration detailsfunction jsSidebarConfig (title) {
  return [
    {
      title,
      collapsable: false, // is foldable children: [// for each article, the '. Md 'extension is omitted' ', // the default is readme.md'js01'.'js02'.'js03'.'js04'.'js05',]}]}Copy the code

Top of the site directory effect display

The deployment of online

After running YARN Build, static pages are generated. We need to host the content in the generated vuepress folder to the server so that we can actually browse our blog through the web. Temporarily, GitHub can be used to host, saving their own money to buy servers and domain name tedious.

We need to set up two warehouses on GitHub, one is used to maintain the whole blog and the other is used to host the packaged files of the blog

For example, I created a MyBlog and dvxiaofan.github. IO

Dvxiaofan.github. IO must be the same as your github username. My GitHub name is dvxiaofan, so the project name is the same as before

The first repository will hold the entire project, and the git operation will not be described in detail.

Writing release scripts

For future distribution, open the deploy-gh.sh file in the scripts folder of your project and directory and change it to the following

cdVuepress // Go to the output folder git init git add -a git commit -m'deploy'
git push -f[email protected]: dvxiaofan/dvxiaofan. Making. IO. Git master / / in front of the code to set up the second master branch of warehouse, you need to replace yourselfCopy the code

View the results

Keep the above articles, CD in the terminal to the project directory, then execute the yarn deploy – gh, the script will start execution, know the final end, submit code deployment is successful, you can enter managed to check the address of your blog https://dvxiaofan.github.io, no problem, You should see your own blog.

summary

This time I will write here first. Later I will deploy the blog to my own domain name when I have time, and then I will update the article