Linux下使用 github+hexo 搭建個人博客01-hexo搭建

本文轉載自查看原文 2019-07-29 16:16 653 next/ hexo

為什么要搭建自己的博客系統？

原因有好幾個吧，歸類如下：
1、自己搭建博客系統很有成就感，可以自己選定頁面風格和頁面排版；

2、自己搭建博客系統可以根據自己的需要添加各種插件功能，因此整體上比網上的第三方博客網站更好；

3、hexo 支持 MarkDown 標記語法，我們可以很容易的上手，排版簡單明了；

4、網上主流的第三方博客網站，不一定很符合你個人的風格，而且由於網站要持續運營下去，因此在此過程中會不可避免的接入廣告。當然這點我們也要理解，要允許網站有盈利，這樣才能一直為大家服務下去；

5、第三方博客網站肯定會有系統升級，因此會時有出現各種改版的情況，你之前寫的博文可能不符合新版本，造成之前的博文排版變得奇丑無比，簡直令人崩潰「當然這種情況很少」。還有就是如果改版后符合你的操作習慣那還好，如果不符合那你就有點方了。

6、第三方博客網站有時會出現其他問題。最常見的就是博客頁面改版「上一條說過」和圖片加載不出來的情況等等。

大概就是上述幾條吧，如果你還有其他的原因，歡迎你在文章底部留言！

說明：如果要把 hexo 生成的靜態文件對外提供訪問，那么請使用 Nginx 完成。
Nginx的部分配置如下：

 1 server {
 2     listen       80;
 3     server_name  www.zhangblog.com zhangblog.com 120.27.48.179;
 4     access_log  logs/access.log  main;
 5 
 6     location / {
 7         alias   /app/softinsall/hexo/public/;
 8         index  index.html index.htm;
 9     }
10     error_page   500 502 503 504  /50x.html;
11     location = /50x.html {
12         root   html;
13     }
14 }

本次部署的機器信息

機器系統：CentOS Linux release 7.5
IP地址：120.27.48.179

因為該博客本人會長期維護和支持下去，因此我是在阿里雲購買的機器。　　

域名解析【可省略】

由於這個博客系統是我以后經常使用並且持續維護，因此我在阿里雲購買了域名並且進行了備案。域名為：zhangblog.com 。
並將域名 zhangblog 解析到了 120.27.48.179。

如果你只是個人測試使用，或者沒有自己的域名，那么該項可省略。

安裝 Git

[root@zhangblog ~]# yum install -y git

具體使用處
1、后續在 hexo 安裝不同的主題時，會使用Git方式獲取這些主題；
2、將 hexo 與自己的 GitHub Pages 結合時。

node.js 安裝

nodejs 下載

官網地址：

http://nodejs.cn/download/

為了方便，我們直接下載二進制版本。這樣就省去了編譯安裝步驟。

二進制安裝包下載

1 [root@zhangblog software]# pwd
2 /app/software
3 [root@zhangblog software]# wget https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-linux-x64.tar.xz  # 下載二進制安裝包

nodejs 部署

 1 [root@zhangblog software]# pwd
 2 /app/software
 3 [root@zhangblog software]# tar xf node-v10.16.0-linux-x64.tar.xz 
 4 [root@zhangblog software]# mv node-v10.16.0-linux-x64 /app/softinsall/
 5 [root@zhangblog software]# cd /app/softinsall/
 6 [root@zhangblog softinsall]# pwd
 7 /app/softinsall
 8 [root@zhangblog softinsall]# ln -s node-v10.16.0-linux-x64 nodejs
 9 [root@zhangblog softinsall]# ll
10 total 4
11 lrwxrwxrwx 1 root root   23 Jun  4 15:59 nodejs -> node-v10.16.0-linux-x64
12 drwxrwxr-x 6  500  500 4096 May 29 05:36 node-v10.16.0-linux-x64

版本信息

1 [root@zhangblog bin]# pwd
2 /app/softinsall/nodejs/bin
3 [root@zhangblog bin]# ./node -v
4 v10.16.0

創建軟連接

1 [root@zhangblog bin]# ln -s /app/softinsall/nodejs/bin/node /usr/local/bin/node 
2 [root@zhangblog bin]# ln -s /app/softinsall/nodejs/bin/npm  /usr/local/bin/npm

hexo 常用操作

如果熟悉 hexo 命令，那么可以忽略這一節。

hexo 操作命令官網

https://hexo.io/docs/commands

$ hexo init [folder]
初始化一個網站。如果沒有提供文件夾，Hexo將在當前目錄中創建網站。

$ hexo new [layout]
創建新文章。如果沒有提供布局，Hexo 將使用 _config.yml 中的 default_layout 項提供的布局。
如果標題包含空格，用引號括起來。

$ hexo generate

簡寫：hexo g

生成靜態文件。

可選項

-d, --deploy

生成靜態文件完成后部署

$ hexo server

簡寫：hexo s

啟動本地服務器。
默認情況下，這是在 http://localhost:4000/

可選項

-p, --port

使用端口，覆蓋默認端口

$ hexo deploy

簡寫：hexo d

部署你的網站。

可選項

-g, --generate

完成部署之前，生成靜態文件。

$ hexo clean
清除緩存文件(db.json)和生成的文件(public)。
使用新主題或想重新生成靜態文件時可使用

$ hexo version
版本信息

 1 [root@zhangblog hexo]# hexo version
 2 hexo: 3.8.0
 3 hexo-cli: 2.0.0
 4 os: Linux 3.10.0-862.14.4.el7.x86_64 linux x64
 5 http_parser: 2.8.0
 6 node: 10.16.0
 7 v8: 6.8.275.32-node.52
 8 uv: 1.28.0
 9 zlib: 1.2.11
10 brotli: 1.0.7
11 ares: 1.15.0
12 modules: 64
13 nghttp2: 1.34.0
14 napi: 4
15 openssl: 1.1.1b
16 icu: 64.2
17 unicode: 12.1
18 cldr: 35.1
19 tz: 2019a

hexo 部署

[root@zhangblog ~]# npm install hexo-cli -g  # 安裝 hexo

將 hexo 命令添加到全局，采用軟連接方式。

1 [root@zhangblog bin]# pwd  # hexo 命令所在目錄
2 /app/softinsall/nodejs/lib/node_modules/hexo-cli/bin
3 [root@zhangblog bin]# ln -s /app/softinsall/nodejs/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin/hexo

部署 hexo 博客環境

部署 hexo

可以放在和 nodejs 同層級的目錄。

 1 [root@zhangblog softinsall]# pwd
 2 /app/softinsall
 3 [root@zhangblog softinsall]# mkdir hexo
 4 [root@zhangblog softinsall]# cd hexo/
 5 [root@zhangblog hexo]# hexo init  # 新建一個網站，默認在目前的文件夾建立網站。
 6 [root@zhangblog hexo]# ll 
 7 total 168
 8 -rw-r--r--   1 root root   1765 Jun  4 16:14 _config.yml
 9 drwxr-xr-x 285 root root  12288 Jun  4 16:15 node_modules
10 -rw-r--r--   1 root root    443 Jun  4 16:14 package.json
11 -rw-r--r--   1 root root 138442 Jun  4 16:15 package-lock.json
12 drwxr-xr-x   2 root root   4096 Jun  4 16:14 scaffolds
13 drwxr-xr-x   3 root root   4096 Jun  4 16:14 source
14 drwxr-xr-x   3 root root   4096 Jun  4 16:14 themes
15 [root@zhangblog hexo]# ll themes/  # 查看自帶的主題
16 total 4
17 drwxr-xr-x 6 root root 4096 Jun  4 16:14 landscape

啟動環境測試

 1 [root@zhangblog hexo]# hexo g  # 生成靜態文件
 2 [root@zhangblog hexo]# ll
 3 total 200
 4 -rw-r--r--   1 root root   1765 Jun  4 16:14 _config.yml
 5 -rw-r--r--   1 root root  25063 Jun  4 16:26 db.json
 6 drwxr-xr-x 285 root root  12288 Jun  4 16:15 node_modules
 7 -rw-r--r--   1 root root    447 Jun  4 16:26 package.json
 8 -rw-r--r--   1 root root 138442 Jun  4 16:15 package-lock.json
 9 drwxr-xr-x   7 root root   4096 Jun  4 16:26 public    # 生成的靜態文件
10 drwxr-xr-x   2 root root   4096 Jun  4 16:14 scaffolds
11 drwxr-xr-x   3 root root   4096 Jun  4 16:14 source
12 drwxr-xr-x   3 root root   4096 Jun  4 16:14 themes
13 [root@zhangblog hexo]# hexo s  # 啟動服務，默認是 http://localhost:4000
14 INFO  Start processing
15 INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

端口信息

1 [root@zhangblog ~]# netstat -lntup | grep 'hexo'
2 tcp6   0  0 :::4000    :::*    LISTEN      7072/hexo

瀏覽器訪問

http://www.zhangblog.com:4000/

更新 hexo 主題

獲取NexT主題

該主題是我們以后長期使用的主題，后續的優化也是基於該主題進行。
由於該主題風格和頁面排版都很好，因此推薦大家使用。

1 [root@zhangblog hexo]# pwd
2 /app/softinsall/hexo
3 # 注意當前的目錄， themes/next 指定存放的位置
4 [root@zhangblog hexo]# git clone https://github.com/theme-next/hexo-theme-next themes/next  # 新地址，當前維護中【但是有些細節不如老版本的】
5 # 或者 ***** 
6 [root@zhangblog hexo]# git clone https://github.com/iissnan/hexo-theme-next themes/next  # 老地址，沒有維護了「推薦使用」

next 主題在 GitHub 有兩個地址：

1 https://github.com/theme-next/hexo-theme-next    # 新地址，當前維護中
2 https://github.com/iissnan/hexo-theme-next       # 老地址，沒有維護了

使用主題

 1 [root@zhangblog hexo]# hexo clean  # 清楚緩存和靜態文件目錄
 2 [root@zhangblog hexo]# vim _config.yml  # 修改該配置
 3 …………
 4 # Extensions
 5 ## Plugins: https://hexo.io/plugins/
 6 ## Themes: https://hexo.io/themes/
 7 theme: next
 8 …………
 9 [root@zhangblog hexo]# hexo g  # 生成靜態文件
10 [root@zhangblog hexo]# hexo s -p 80  # 啟動服務，指定端口

瀏覽器訪問

http://www.zhangblog.com/

新建一篇博客

新建博客

 1 [root@zhangblog hexo]# pwd
 2 /app/softinsall/hexo
 3 [root@zhangblog hexo]# hexo new 'MarkDown_Use_Guide'
 4 INFO  Created: /app/softinsall/hexo/source/_posts/MarkDown_Use_Guide.md
 5 [root@zhangblog hexo]# cat source/_posts/MarkDown_Use_Guide.md   # 系統生成內容如下
 6 ---
 7 title: MarkDown_Use_Guide
 8 date: 2019-06-04 19:28:51
 9 tags:
10 ---

為博客添加內容—- Markdown 新手指南

  1 [root@zhangblog hexo]# pwd
  2 /app/softinsall/hexo
  3 [root@zhangblog hexo]# cat source/_posts/MarkDown_Use_Guide.md 
  4 ---
  5 title: MarkDown 新手指南
  6 date: 2019-06-04 19:28:51
  7 tags:
  8   - MarkDown
  9 categories:
 10   - MarkDown
 11 ---
 12 
 13 # 標題
 14 # 一級標題
 15 ## 二級標題
 16 ### 三級標題
 17 #### 四級標題
 18 ##### 五級標題
 19 ###### 六級標題 
 20 
 21 ---
 22 
 23 # 列表
 24 ## 無序列表
 25 - 文本1
 26 - 文本2
 27 - 文本3
 28 
 29 ## 有序列表
 30 1. 文本1
 31 2. 文本2
 32 3. 文本3
 33 
 34 ---
 35 
 36 # 鏈接、圖片和引用
 37 ## 這是一個超連接
 38 [lightzhang 個人博客](http://www.zhangblog.com/)
 39 
 40 ## 這是一個站外圖片鏈接
 41 ![示例圖](https://www.cnblogs.com/images/logo_small.gif)
 42 
 43 ## 這是一個站內圖片鏈接
 44 ![數字網絡](/uploads/weixin_pulic_small.jpg)
 45 
 46 ## 這個一個引用
 47 > 寵辱不驚，看庭前花開花落；去留無意，望天上雲卷雲舒
 48 
 49 ---
 50 
 51 # 粗體和斜體
 52 從最開始的 *wordpress* ,到 *tale* ,到現在的**hexo**,網站變得越來越簡單,越來越輕量級,這里主要說說**hexo**的使用。
 53 
 54 ---
 55 
 56 # 代碼引用
 57 ## 多行代碼
 58 ···
 59 「備注：實踐中，請把前一行開頭的 · 改為 `」
 60 #!/bin/bash
 61 ################ Version Info ##################
 62 # Create Date: 2018-09-29
 63 # Author:      Zhang
 64 # Mail:        zhang@xxxx.com
 65 # Version:     1.0
 66 # Attention:   腳本描述說明
 67 ################################################
 68 ···
 69 「備注：實踐中，請把前一行開頭的 · 改為 `」
 70 
 71 ## 單行代碼  【只能一行】
 72 `
 73 /bin/sh echo "test" >> /dev/null
 74 `
 75 
 76 ---
 77 
 78 # 表格
 79 ## 書寫格式1
 80 | Tables        | Are           | Cool  |
 81 | ------------- |:-------------:| -----:|
 82 | col 3 is      | right-aligned | $1600 |
 83 | col 2 is      | centered      |   $12 |
 84 | zebra stripes | are neat      |    $1 |
 85 
 86 ## 書寫格式2
 87 dog | bird | cat
 88 ----|------|----
 89 foo | foo  | foo
 90 bar | bar  | bar
 91 baz | baz  | baz
 92 
 93 ## 書寫格式3
 94 | 名稱 | 系統版本 | 內網IP | Hostname |
 95 |--|--|--|--|
 96 | salt100 | CentOS7.5 | 172.16.1.100 | 10.0.0.100 |
 97 | salt01 | CentOS7.5 | 172.16.1.11 | 10.0.0.11 |
 98 | salt02 | CentOS7.5 | 172.16.1.12 | 10.0.0.12 |
 99 | salt03 | CentOS7.5 | 172.16.1.13 | 10.0.0.13 |
100 
101 # 字體或圖片居中
102 
103 <center>
104 
105 **讀萬卷書，行萬里路**
106 
107 </center>
108 
109 <center>
110 
111 ![數字網絡](/uploads/avatar_small.png)
112 
113 </center>
114 
115 ---

站內圖片位置

1 [root@zhangblog hexo]# pwd  # 站點位置
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# ll source/uploads/
4 total 388
5 -rw-r--r-- 1 root root 131807 Apr 30 14:39 avatar.png
6 -rw-r--r-- 1 root root  16602 Jun  7 17:39 avatar_small.png
7 -rw-r--r-- 1 root root 209605 Jun  7 17:02 weixin_pulic.jpg
8 -rw-r--r-- 1 root root  19296 Jun 11 14:55 weixin_pulic_small.jpg

生成靜態文件

1 [root@zhangblog hexo]# pwd
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# hexo g  # 生成靜態文件

瀏覽器訪問

1 http://www.zhangblog.com/
2 http://www.zhangblog.com/2019/06/04/MarkDown_Use_Guide/

Linux下使用 github+hexo 搭建個人博客01-hexo搭建

本次部署的機器信息

域名解析【可省略】

安裝 Git

node.js 安裝

nodejs 下載

nodejs 部署

hexo 常用操作

hexo 部署

部署 hexo 博客環境

部署 hexo

啟動環境測試

端口信息

瀏覽器訪問

更新 hexo 主題

獲取NexT主題

使用主題

瀏覽器訪問

新建一篇博客

新建博客

為博客添加內容—- Markdown 新手指南

站內圖片位置

生成靜態文件

瀏覽器訪問

推薦閱讀

免責聲明！