Create a personal blog

Introduction

直接从hexo加github搭建blog具体步骤开始看即可
Originally I was going to provide some links, but later it was a bit confusing, so I sorted it out by myself.
本文中涉及的命令需要良好的网络，不要以为随便冒出信息就以为命令执行成功。

Related Links

1. Links to the official website of related components that may be needed ( 相关博文不理解的地方可以看一下对应文档,最好看一下，可以理解部分命令的含义):
   jekyll Chinese document: https://www.jekyll.com.cn/
   hexo: https://hexo.io/zh-cn/docs/
   node.js Chinese document: http: //nodejs.cn/ English document: https://nodejs.org/en/

2. The relevant domain name needs (there should be a default domain name resolution service (not too advanced)) Aliwan
   : https://wanwang.aliyun.com/Tencent
   (seems to be engaged in activities all the time): https://dnspod.cloud.tencent .com/?from=qcloudProductDns

3. Related blog posts
   Use git to build a personal blog: https://www.cnblogs.com/qianjilou/p/7381233.html
   hexo + GitHub + git to build a personal blog: https://blog.csdn.net/edxuanlen/article/details /79154116
   Jekyll build a personal blog: http://baixin.io:8000/2016/10/jekyll_tutorials1/
   hexo build a personal blog: http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source =tuicool / http://baixin.io:8000/2015/08/HEXO to build a personal blog/
   domain name application and configuration details: https://blog.csdn.net/qq_20538515/article/details/83009145
   super detailed creation of a personal Blog guide: https://blog.csdn.net/grave2015/article/details/79961843

Introduction to github pages

Github provides the Github pages function (provides the user's display page).
Use introduction official website address: https://pages.github.com/
Two types of introduction of github pages: https://www.cnblogs.com/liuzhi/p/8169255.html
github project display interface introduction (Chinese version) : Https://www.cnblogs.com/goweb/p/5460210.html
github personal display interface (used to build a blog): https://www.cnblogs.com/qianjilou/p/7381233.html
codding pages have the same Similar function of: https://coding.net/help/doc/coding-service/coding-pages-introduction.html

Environmental preparation

1. Download of node.js (choose the version of the corresponding system): https://nodejs.org/en/download/
2. Download of git : https://git-scm.com/download/win
3. github account The creation of: https://blog.csdn.net/qq_40182873/article/details/88016279#Git_93
4.hexo installation, use the installation command, use git bash (simulating the linux environment in windows)

Theme switching

After selecting the template through the official website, there will be a corresponding document description at the corresponding github address, usually in the md file under the /themes/ directory. The
official website theme template introduction: https://hexo.io/themes/
yelee theme Switch: http://moxfive.coding.me/yelee/
Related blog: http://moxfive.coding.me/

About adding ssl access method

Enable mandatory HTTPS (small green lock): https://blog.csdn.net/jave_f/article/details/80056501

Deploy a document-like module

gitbook official website: https://www.gitbook.com/
gitbook tutorial: https://www.jianshu.com/p/421cc442f06c
gitbook from ignorance to introduction: https://blog.csdn.net/lu_embedded/article /details/81100704
GitBook deployment web interface document: https://www.jianshu.com/p/1a1f6a97f394
gitBook installation and use document: https://blog.csdn.net/zijie_xiao/article/details/51110983

Combination of gitbook and github pages: https://www.jianshu.com/p/925745669c6c
Tutorial: https://einverne.github.io/gitbook-tutorial/
Automatic configuration: https://www.jianshu.com/p/ 41478a0ea104

Specific steps to build blog with hexo and github

Installation Environment

There is an introduction to the environment preparation above, and introduce the command to install hexo. After installing Git, execute it in the git bash tool. The network is essential.

npm install -g hexo

Before that, you need to have a node.js environment, just download the installation package and install it on the official website

Generate blog directory and realize local access

After the environment is installed, execute the following command in the directory where you need to build a blog.

1. Determine the folder to build the blog, this command will build the directory structure of the corresponding hexo for us to build the blog

hexo init [folder]

If the download is incomplete, you will be prompted to complete the command

npm audit fix

2. The commands for publishing articles, you can look at the official documents in this part . The commands are mainly to create .md files in the corresponding folders . According to the different layouts, there is a difference between drafts and new articles by default. If the default layout is expressed as drafts If it is, execute publish to convert to a new article.

hexo new [layout] <title>

hexo publish [layout] <title>

$ hexo new photo "My Gallery"

Here we can source/_postscreate a 文章名称.mdfile directly in ,

The third command can create a file based on the template, 有分类,标签，时间等属性的配置which is the configuration of Front-matter

3. Generate article

hexo g

hexo will generate the corresponding css, js, and article html for us. The specific generated content is determined by the configured blog theme, and the generated files are in the public directory

4. Access through the network (local)

hexo server

After that, you can access through http://localhost:4000 ,可以通过 -p参数指定访问的端口

Then there will be the default file displayed in the corresponding blog style.

Blog theme switch

1. Official website address: https://hexo.io/themes/ The
above pages are some of the official theme pages. After clicking, you will enter the corresponding blog address, find the author's github address on the corresponding blog interface, and download the corresponding theme Yes, there will be a corresponding README.md file to teach you how to install the theme

This is a detailed usage document of a theme: http://moxfive.coding.me/yelee/

2. After the download is complete, there will be more corresponding theme directories in the themes folder, (you can copy it in other places)
and then _config.ymlconfigure the theme to be used in the upper file.

theme: shana

3. If you have executed the hexo gcommand before to generate the file corresponding to the previous theme, then you need to execute the following command to clear the file generated before, and then againhexo g

hexo clean

Deploy to github page

1. Create the project corresponding to the git pages page, there is an introduction address above, so I won’t go into details
2. Configure ssh connection: do not go into details (password-free login configuration): https://blog.csdn.net/qq_40182873/article/details/88016279#Github__432
3. Configure the address of github into the _config.ymlfile, and the configuration of the corresponding attribute in the annotation has a corresponding link address

deploy:
  type: git
  repository: [email protected]:cloudinwinter/cloudinwinter.github.io.git
  branch: master

Anyone who knows git knows, I won’t go into details, the git address here is the ssh address

4. Execute the following command

hexo d

Submit the generated html, css, js and related files to the git repository. Probably equivalent to the executed git pushcommand, the
这个命令的执行需要安装对应的hexo和git相关的插件command is as follows

npm install hexo-deployer-git --save

5. Every time the corresponding file is added to the corresponding directory and executed, it hexo g -dcan be published on github.

Add new article

1. As mentioned in the above comments, source/_posts 中创建article name .md` file.
2. Hexo supports markdown, but we need to preview the articles we wrote.
We can use the online or downloadable markdown editor. For
example
 1. Maxiang (not sure if the format is compatible): https://maxiang.io/
 2. typora download: https://www.typora.io/
 3. gitbook edit: https://legacy.gitbook.com/editor
 4. Of course there are some corresponding online markdown editors, different systems will have different Editor, let's not talk about it

 5. The grammar of the markdown editor (searched online, many)
  1. https://www.jianshu.com/p/b03a8d7b1719
  2. http://www.runoob.com/markdown/md-advance.html (cainiao
 Markdown tutorial) 6.hexo seems to define the corresponding syntax for inserting pictures and other links, please check the official document for details

3. The article upload will not go into details

Article classification and label setting

文章的的标签和分类具体参考hexo的官方文档
Official: https://hexo.io/zh-cn/docs/front-matter I
haven't tried this, please see for yourself

I'm not very familiar with it,

Add interface documentation to the blog project (similar to the book catalog can be)

Create an empty branch of the current project

1. Create a directory for storing documents (such as gitbook), clone the github project,切换至目录下

git clone  [email protected]:cloudinwinter/cloudinwinter.github.io.git

2. Switch to the cloned working directory and execute the git command to create a new branch (here the branch name seems to be this, I didn’t understand it)

git checkout --orphan gh-pages

Here --orphanis not to create a new branch on the basis of the master (you need to make a commit to view the corresponding branch with the git branch command), after the execution is completed, the branch will be switched

3. Delete all files in the gh-pages branch.

git rm -rf .

Delete files in the current directory, you can also operate directly on the computer,一般完成后只剩下.git文件

Create a gitbook directory (transferred from the link provided above, part of the content view original text)

1. Install gitbook, this also requires the node.js environment (create a new directory corresponding to the book name or document name)`

npm install -g gitbook-cli

2. Initialization

gitbook init

The corresponding folder
README.md SUMMARY.md will be created by default

In order to better reflect the directory structure of gitbook, we change SUMMARY.mdthe content of the files generated by default

Reprinted as follows

# 目录

* [前言](README.md)
* [第一章](Chapter1/README.md)
  * [第1节：衣](Chapter1/衣.md)
  * [第2节：食](Chapter1/食.md)
  * [第3节：住](Chapter1/住.md)
  * [第4节：行](Chapter1/行.md)
* [第二章](Chapter2/README.md)
* [第三章](Chapter3/README.md)
* [第四章](Chapter4/README.md)

3. Generate books and web access
4. Each time you add and change the above files, execute the gitbook initcommand to generate the corresponding directory structure and the .md file under it

gitbook build [书籍路径] [输出路径]

Generate corresponding HTML, js, css files in the corresponding directory according to the .md file

$ gitbook serve --port 2333

This command includes the process of git build, and the port to
be accessed through -port is specified by default http://localhost:4000/

Specifically, the corresponding html and css files will be generated in the _book directory

Implement gitbook's access on github pages

Since we initialized directly in the corresponding git workspace, just submit the file directly to the corresponding branch.

1. Copy the files in the _book directory to the corresponding folder (the directory of the corresponding book created in the git workspace) (such as creating a new javabook directory in the git directory)

2. Execute the command and upload the file

git add [目录]
git commit -m "提交书籍"

3. Push books to the remote warehouse. Since we are cloning directly, we don’t need to execute the git remote command to add the remote warehouse address. When cloned, the default local alias origin is already set for it.

 git push -u origin gh-pages

Set it as the default remote library, and then execute git push to submit the current branch to the remote library

It seems that the branch name cannot be changed, otherwise the access may not take effect.

In the end, the previous step is invalid. Simply create a book folder in the public directory of the hexo directory, copy the content of _book into it, and then publish the hexo d command to the remote warehouse. Just submit to the main branch

Book access address: https://cloudinwinter.github.io/Javatechnology/
blog access address: https://cloudinwinter.github.io/