Nanny level tutorial on building personal home page (II)

Dry goods time

hexo Personal homepage series tutorials ： This article mainly introduces how to set the theme , And how to write 、 Upload articles .

next The theme

Now? , We have to choose a beautiful theme , The author recommends using next The theme . On the one hand is next Integrated black and white simple style , Help readers focus on the reading of the article ; On the other hand is next There are many active people in the community , current 8.0 The theme of this version integrates the interfaces of many third-party plug-ins , User interaction can be carried out conveniently 、 Page beautification 、 Site statistics 、 Baidu push and other functions , Some dynamic sites , It covers almost everything .

Open the root directory of the personal home page project , open git bash window , Typing the following code will next Download to local blog/themes route ：

git clone https://github.com/theme-next/hexo-theme-next themes/next

Open... In the root directory _config.yml Modify the theme , This file is the site configuration file .

# Site
title:  Zhang San's happy life 
subtitle:
author:  Zhang San 
language: zh-CN
timezone: Asia/Shanghai

# Change the theme to  next
theme: next

It is worth noting that ,next The theme is divided again 4 Seed theme , Respectively Muse、Mist、Gemini、Pisces. How to set it ？

Enter the path blog/themes/next, find _config.yml, there _config.yml Is the theme profile .

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

The author chose Gemini, Students can choose which one they want to choose and remove the annotation of which one they want , You can try them all to see the effect , Pick one you like .

After setting up , At the root blog Open down git bash, Type... In turn ：

hexo clean
hexo g
hexo s

You can start your personal web service locally , Enter web address in browser ：localhost:4000, Test your theme .

My first article

Our hardware facilities are ready , But the only thing on the web is hello world This article , How to write an article ？

We enter blog/source/_posts Folder , You can see hello world.md The initial article of this project . This path is where all your articles are saved .

At present, there are two ways to write articles

• The first one is ： We can use other markdown Editing tools （ for example Typora） Edit in advance , Then drag the written article to _posts in . Then open it in the root directory git bash, type hexo clean && hexo g && hexo s（ Or use VScode open blog Folder , Type... In the terminal hexo clean; hexo g; hexo s, Recommended VScode Maintain your website , In the future, we should IDE Explain the standard ）, You can sync to the local website .

• The second kind ：

  1. We entered ahead of time blog/scaffolds Folder , open post.md, Replace it with ：

     ---
     title: {
              {
              title } }
     date: {
              {
              date } }
     categories:
     tags:
     keywords:
     description:
     ---
     

     This post.md It's the master of your article , What unified configuration do you want to make , Can be edited in the master .

  2. Type... In the terminal ：

     hexo new post ' My first article '
     

     This command is used to initialize an article , Among them post Write but not write . So you can be in _post Found in folder My first article .md 了 . After finish , In the first way hexo clean ... Command to regenerate the local file , open localhost:4000, You can see your own article .

Deploy to github

OK, Now we need to deploy all the locally generated project files to the remote warehouse , So that others can access your home page .

First , We type the following command to install the deployment plug-in ：

npm install hexo-deployer-git --save

After installation , We enter blog/_config.yml Site profile , modify deploy Field ：

deploy:
  type: git
  // repository  Replace with your own warehouse name 
  repository: [email protected]:dongyaoo/dongyaoo.github.io.git
  branch: master

Remember you github Warehouse name , Students do not remember the move ： Build a personal home page, nanny level tutorial （ One ）. Follow the method in the previous tutorial to find the warehouse name you bind ,

After configuration, the VSCode The input terminal ：

hexo d

One click deployment to github. If some novice students report an error in this step , It should not be set git config --global user.email | user.name ）. Type the following command in the terminal , again hexo d Just a moment .

git config --global user.email "gitHub mailbox "
git config --global user.name "gitHub user name "

Wait a moment , Type in the browser www.dongyaoo.github.io You can visit your personal web page （ Remember to dongyaoo Replace with your warehouse name ）.

At this time , Your website is online , Enter this website on other devices and you can also see your own website ~~

Conclusion

Students who want to learn more high-quality content , Pay attention to the author's home page ： Dongyao theory ~~