Build a free personal blog with GitHub and hexo

coder-ice 2020-11-11 19:48:46
build free personal blog github


Every programmer needs a personal blog , At present, what is widely seen in people's view is CSDN、 Blog Garden 、 Simple books , But they didn't give users a dedicated site 、 A memorable domain name . You need one https://xxx.xxx.xxx/ Format of the URL , A free code site , A real personal blog .

1. GitHub Free website provided by

1.1 GitHub—— Hosting platform for open source and private software projects

GitHub Official website

As an open source code base and version control system ,Github Have more than 900 Million developer users . As more and more applications move to the cloud ,Github It has become the preferred way to manage software development and discover existing code .
—— source : Baidu Encyclopedia

GitHub It's the largest code repository at present , If you haven't GitHub If you have an account number , Go to the official website to register one .

1.2 GitHub Pages—— Free to provide the most basic static website

GitHub Pages Official website

Every GitHub Account can open a static website for free ( The domain name is username.github.io), The website was created by GitHub Pages Provide , The domain name is omitted 、 The server 、 Put on record and so on a series of problems that need to be considered when building a station , Just need a static website code .

First you need to create a GitHub Pages repository.GitHub Pages repository With ordinary repository It's the same , The only difference is that his name must be username.gihub.io. This official tutorial GitHub Pages It's easy to understand , Press this to finish and you will have a website username.github.io
Such as your GitHub User name is abc, So your repository The name and address are abc.gihub.io

Now it's only one step away from a good website , Copy all the files of a good website to your library .
GitHub The official advice is that you use the blogging tool Jekyll .GitHub In the library settings, there are also Jekyll Topic selection .

This article will introduce Hexo Generation tool .

2. Hexo Build a static blog site

2.1 Hexo—— Fast 、 Simple and efficient blog framework

Hexo Official website

Ultrafast speed
Node.js Super fast generation speed , Rendering hundreds of pages in seconds .
Support Markdown
Hexo Support GitHub Flavored Markdown All functions of , It can even be integrated Octopress Most plug-ins for .
One key deployment
Only one instruction is needed to deploy to GitHub Pages, Heroku Or other websites .
Rich plug-ins
Hexo Powerful plug-in system , Installing plug-ins enables Hexo Support Jade, CoffeeScript.

2.1.1 Installation premise

install Hexo Pretty simple . However, before installation , You must check that the following applications are installed on your computer :

  • Node.js (Should be at least nodejs 6.9)
  • Git

If you have the above prerequisites installed on your computer , So congratulations ! Next, just use npm Can finish Hexo Installation .

$ npm install -g hexo-cli

If the required program is not installed on your computer , Please complete the installation according to the following installation instructions .

Mac user
You may have problems compiling , Please come first App Store install Xcode,Xcode After completion , Start and enter Preferences -> Download -> Command Line Tools -> Install Install command line tools .

2.1.2 install Git

Windows: Download and install git.
Mac: Use Homebrew, MacPortsbrew install git; Or download Erection sequence install .
Linux (Ubuntu, Debian):sudo apt-get install git-core.
Linux (Fedora, Red Hat, CentOS):sudo yum install git-core.

Windows user
For well-known reasons , Download... From the link above git for windows It's better to put up a proxy , Otherwise, the download speed is very slow . You can also refer to This page , Contains the download address stored in Baidu cloud .

2.1.3 install Node.js

install Node.js The best way is to use nvm.

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

After installation , Restart the terminal and execute the following command to install Node.js.

$ nvm install stable

Or you can download Erection sequence To install .

Windows user
about windows Users , It is recommended to use the setup program to install . When installing , Please check. Add to PATH Options .
in addition , You can also use the Git Bash, This is a git for windows It comes with a set of programs , Provides Linux Style shell, In this environment , You can directly use the above command to install Node.js. The way to open it is simple , Right click anywhere , choice “Git Bash Here” that will do . because Hexo Many of the operations involved in the command line , You can consider always using Git Bash To operate .

2.1.4 install Hexo

After all the necessary applications are installed , You can use npm install Hexo.

$ npm install -g hexo-cli

2.1.5 Station building

install Hexo After completion , Please execute the following order ,Hexo The required files will be created in the specified folder .

$ hexo init <folder>
$ cd <folder>
$ npm install

After new creation , The directory of the specified folder is as follows :

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

2.2 Hexo Custom configuration and blog theme

2.2.1 _config.yml

Website configuration information , You can configure most of the parameters here . Each configuration parameter in the file has detailed remarks , Fill in the required information according to the rules .

2.2.2 package.json

Information about the application ,EJS、 Stylus and Markdown renderer Installed by default , You are free to remove .

package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}

2.2.3 scaffolds

Template folder , When you create a new post ,Hexo Will be based on scaffold To create documents .

Hexo Template refers to the new template markdown The default filling content in the file . for example , If you modify scaffold/post.md Medium Front-matter Content , Then every time you create a new article, you will include this change .

2.2.4 source

The resource folder is where the user's resources are stored , except _posts Outside the folder , It begins with _ ( Underline ) The file of / Files that will be ignored and hidden .Markdown and HTML The file will be parsed and put into public Folder , And other files will be copied .

2.2.5 themes

Theme folder ,Hexo Static pages will be generated according to the theme .GitHub There are many third-party themes on , Introduce according to the document introduction of the topic Hexo In the project , A corresponding folder will be generated under the theme folder , Revise _config.xml The folder theme Attribute is enough .

This article will introduce Indigo The theme .

3. Indigo The theme ——Material Design Style Hexo The theme

Indigo in GitHub

Support only IE10+ Wait for modern browsers .
Go to jQuery, Lighter . Believe in the native compatibility of modern browsers .
Use Less As css The preprocessor , Need to install hexo-renderer-less.
Added support for English Fonts Roboto.
Added some ripple effect .
Sharing implementation without front-end dependency .
Site search based on static data , No third party intrudes .
Support article reward .

There are two main branches , My blog uses card Branch card style theme ,master Branches are old style tile themes .

3.1 install

Installation needs to confirm your Hexo Version in 3.0 above , as well as Node Version is 6.x above , stay Hexo root directory , Execute the following command .

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

3.1.1 Switching themes

perform git branch Show all local branches , If there is only one branch , You can execute the following command to get the topic of another branch .

# Get remote card Branch , And switch
$ git checkout -b card origin/card
# Get remote master Branch , And switch
$ git checkout -b master origin/master

This command only needs to be executed once , Then use git checkout [branch] Command to switch between two topics .

3.1.2 Dependent installation

Still Hexo root directory , If the following plug-ins have been installed , No need to install again .

Less

The default theme is less As css Pretreatment tools .

$ npm install hexo-renderer-less --save

Feed

Used to generate rss.

$ npm install hexo-generator-feed --save

Json-content

Static data is used to generate sites , Data source for on-site search .

$ npm install hexo-generator-json-content --save

QRCode

Used to generate wechat sharing QR code .

Optional , When not installed, it will request jiathis Api Generate qr code .

$ npm install hexo-helper-qrcode --save

3.1.3 Open the tab

hexo new page tags

modify hexo/source/tags/index.md Metadata

layout: tags
comments: false
---

3.1.4 Open the category page

only card theme Support .

hexo new page categories

modify hexo/source/categories/index.md Metadata

layout: categories
comments: false
---

3.2 common problem

3.2.1 How to set the article abstract

stay Markdown To add <!-- more -->

3.2.2 How to add multiple tags to an article

There are two multi label formats

tags: [a, b, c]

or

tags:
- a
- b
- c

Replace themes\indigo\source\img\brand.jpg, Keep the original file name unchanged .

3.2.4 How to use icons in articles

Come first fontawesome Find the icon name you need , such as :book, Use in the following format :

<i class="icon icon-book"></i>

Icon style prefixes are icon, Besides, there are 5 Icon sizing classes and 1 Space classes .

<!-- 1.3 Multiple size -->
<i class="icon icon-book icon-lg"></i>
<!-- 2 Multiple size -->
<i class="icon icon-book icon-2x"></i>
<!-- 3 Multiple size -->
<i class="icon icon-book icon-3x"></i>
<!-- 4 Multiple size -->
<i class="icon icon-book icon-4x"></i>
<!-- 5 Multiple size -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px The right margin -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px The left margin -->
<i class="icon icon-book icon-pl"></i>

3.2.5 Individual icons cannot be displayed

If your browser has ADBlock, It will shield SNS Related content , such as :Github.

terms of settlement : Configurable ADBlock Not running on your site .

3.2.6 There is no style after generating the site

install less

3.2.7 Self modification of the style line does not take effect

Because the topic references by default cdn style , Only when the theme is updated ,cdn The style in will change . If you want to use your own style , You need to modify the configuration of cdn: false. So it's not quoting cdn resources , Using local resources .

3.2.8 The site doesn't work after changing the style

After confirming the non cache problem , perform hexo clean Then generate and upload .

It is recommended to execute once every submission hexo clean, You can create one in the project directory shell Script , Carry out orders hexo clean && hexo generate --deploy, After running, it can ensure that every modification can take effect .

3.2.9 Change the color of the site

edit themes\indigo\source\css_partial\variable.less, Change the corresponding color variable .

Color reference :Material Design Color Palette Generator

Be careful : When using custom color matching, you need to set the cdn close ,cdn: false.

3.2.10 add to 404 page

stay hexo/source New in directory 404.html.

Set metadata information , If you don't want to apply the theme layout, you can set layout by false.

layout: false
title: "My Blog Name | 404"
---

3.2.11 Use... In blogs Emoji

Reference resources Can i use emoji in mypage?

3.3 Custom page

The theme Card Branches provide customized module support for custom pages , Here is a brief introduction to .

3.3.1 Create a custom page

hexo new page pageName

After executing the order, it will be in your Hexo root directory source/ Create a directory with the one you just entered pageName The same folder , There's only one in it index.md.

3.3.2 Configuration page

layout: page # must
title: pageTitle # must , Page name
description: User defined page function demonstration # Page secondary title , Descriptive text
comments: false # Disable comments , Optional , Default on
reward: false # No reward , Optional , Default on
----

3.3.3 Module and content input

Custom page ,imageblockquotepre Etc. will be given a special style . Besides , Provides @moduleName{ ... } Format tags are used for package content , Give style to .

版权声明
本文为[coder-ice]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple