github+hexo build blog (1)

background:

• I always wanted to build a handsome and high-end personal blog, and then I gave up building a blog for some reason last time, because I saw the blog of the great god again, and I was resolutely moved again.

---

first step

1. Introduction to github pages

• github is a project hosting website that lists the source files of the project, so github has a pages function that can customize the home page to replace the default page that lists the source list

Therefore, github Pages can be thought of as user-written and hosted static web pages on github

2. github related official documents

• document one
• Document two

3. github provides two types of homepages

• Personal or Organization Homepage
  • The content of the page is located under master
• Project homepage
  • The page content is located under the master of each project
• (PS: The blog we create is a personal page, but it can also be created as a project home page)

The second step, register a github account

1. Apply for a github account, github official website -> PS: Use Firefox or Google Chrome, otherwise you may not be able to register

• Fill in the account information
  • account name
  • Mail
  • password

2. The second step, after filling in the information, select your personal plan

3. The third step is to choose what you do, professional
4. The fourth step is to go to your email to verify your account.
5. Then log in to your github account, create a new repository, and set private or public viewable

The third step, install the git client

• After registering the github account, install the git client on your computer
• Step-by-step tutorial and download link
• PS: When uploading local code , push local code to github error

The fourth step, install Node

1. After installing the git client, the following is to install Node

• Hexo is a static blog based on Node environment, npm tool is essential

2. Node download address
3. After downloading, you can install it directly (it is relatively simple, no screenshots)
4. Then execute node -v on the git client, it will display your installation version, which means the installation is successful

• PS: It is possible that your version number is not displayed when executing node -v, you can reopen your git client and execute the command again

The fifth step, install hexo

• hexo official documentation

1. After installing node, create a new folder on your local computer to store the blog (you have to remember where to store it, and you will need this path later), and then cd to the path

• Tips:
  • The path can be completed with the tab key! ! !

2. After switching to your blog directory, execute the npm i -g hexo command

• It is recommended to use cnpm to install, it will be relatively faster, it is possible that your cnpm command does not exist, you need to install the cnpm command

安装cnpm命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
然后在执行
cnpm i -g hexo

• Of course, you can also directly execute the npm i -g hexo command, but it is very slow... (I am the slow kind anyway)

3. Then confirm success, execute the command hexo -v

hexo -v

4. Reinitialize, execute the command hexo init

hexo init 

5. At this time, when you open the folder where the blog is stored, you will see some files, as shown below

• The role of various files in folders
  • node_modules: dependent packages
  • scaffolds: command to generate templates for articles, etc.
  • source: various articles created with the command
  • themes: themes
  • _config.yml: Configuration of the entire blog
  • package.json: Configuration information of the module project required by the project

6. Next, modify the files in the blog folder and modify some configurations of the _config.yml file (remember that there must be a space after the colon, otherwise the configuration will not take effect!!! Remember!!! Remember!!!)

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

7. Then execute the last three commands

命令1生成部署文件
hexo deploy
命令2，然后部署
hexo generate
命令3，然后运行
hexo server

hf@hf-PC MINGW64 /d/git-blog
$ hexo deploy
INFO  Start processing
INFO  Files loaded in 347 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/04/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/[email protected]
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/[email protected]
INFO  Generated: archives/2018/index.html
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: 2018/04/02/hello-world/index.html
INFO  28 files generated in 828 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 234 ms
INFO  0 files generated in 261 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

8. Now is the time to witness the miracle, open your browser and enter http://localhost:4000

9. This is github+hexo to build a blog