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
- 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
- github related official documents
- 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
- 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
- password
- The second step, after filling in the information, select your personal plan
- The third step is to choose what you do, professional
- The fourth step is to go to your email to verify your account.
- 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
- After installing the git client, the following is to install Node
- Hexo is a static blog based on Node environment, npm tool is essential
- Node download address
- After downloading, you can install it directly (it is relatively simple, no screenshots)
- 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
- 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! ! !
- 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)
- Then confirm success, execute the command hexo -v
hexo -v
- Reinitialize, execute the command hexo init
hexo init
- 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
- 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
- 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.
- Now is the time to witness the miracle, open your browser and enter http://localhost:4000
- This is github+hexo to build a blog