天天看點
傳回

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

目錄

  • 基本原理
  • 方法1 - 本機Windows下建站 (力薦)
    • 下載下傳安裝

      node.js
    • 用管理者權限打開指令行，安裝

      hexo-cli

       和

      hexo

    • git
    • 初始化

      hexo
    • 使用

      hexo generate

       生成靜态資源
    • 在本地運作

      hexo

       ，看一切是否正常
    • 在

      Coding.net

       建立與使用者名相同的項目，并啟用代碼的

      pages

       功能
    • 啟用通過

      git

       将

      hexo

       部署到遠端的功能

    • _config.yml

       來配置

      hexo

    • hexo clean && hexo g && hexo d

       釋出

      hexo

       部落格
    • 域名綁定
    • 主題使用
  • 方法2 - Cloud Studio下建站 (力薦)

    • Coding.net

       建立與使用者名相同的項目，并啟用

      pages
    • 使用現有項目建立工作區
    • 使用指令行配置環境

    • _config.yml

       檔案的配置、域名綁定、主題使用等等
    • 文末彩蛋

本文介紹對開發小白也毫無壓力的hexo靜态部落格建站全攻略，

github.io

與

coding.me

的靜态部落格類似，3年前本人基于本機

Windows

github.io

上建立了靜态Github Pages - yanglr，本文以在

Coding pages

上建站為例。

配置區: 用于

hexo

部落格的配置，成功部署後原

hexo init

産生的目錄下會生成一個

public

的檔案夾。

釋出區:

事實上，這一部分就是由配置區生成的

public

檔案夾中的内容。

釋出區的代碼必須是公開的，配置區的代碼看需要了，如果

git

部署時使用的是

repo: https://使用者名:密碼@倉庫位址

這種方式，如果也

push

到公開代碼的倉庫就會洩漏個人密碼了，是以建議配置在自己的電腦上進行，或使用

ssh key

的形式代替明文密碼。

node.js

到官網下載下傳

nodejs

的最新

LTS

版安裝即可。

hexo-cli

hexo

 

$ npm install hexo-cli -g
$ npm install hexo --save

如果安裝速度很慢，可以考慮先換淘寶鏡像源:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

再繼續進行安裝~

git

到Git官網下載下傳Git Windows版，使用預設設定進行安裝即可。

hexo

比如，打算在

D:\

盤進行配置，若将配置的檔案夾取名為

blog

，操作如下：

$ cd D:\
$ hexo init blog

檔案夾名字任意起，根據個人需要了。

hexo generate

存放

hexo

配置的檔案夾

blog

建立好之後，就可以使用

hexo generate

來生成靜态資源了，該指令也可簡寫為"hexo g"。

hexo

此時可使用

hexo server

(簡寫為

hexo s

)來開啟本地

web

伺服器檢視頁面效果，預設情況下在浏覽器中打開

http://localhost:4000

即可看到如下界面:

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

Coding.net

pages

打開網址https://dev.tencent.com/user/projects/create，即可建立項目。

由于項目名字與使用者名

legege007

一緻，是以我的

coding

靜态

pages

的通路位址即為 legege007.coding.me, 你用同樣的方法，位址會變成

你的使用者名.coding.me

。而如果你的項目名是

blog

, 而使用者名不是

blog

，則此時

coding

pages

的通路位址即為

你的使用者名.coding.me/blog

, 這樣會有一個隐含的問題在，就是如果你要綁定個人域名，會導緻靜态資源

js、css

等加載失敗，即部落格會出現有文字但呈現頁面混亂的情形。

這裡也親自淌過坑，最終發現有效的處理辦法是:

建立的項目名必須要和使用者名一緻，建立的項目名必須要和使用者名一緻，建立的項目名必須要和使用者名一緻，強調三連~

git

hexo

完成此項工作，需要先安裝

hexo-deployer-git

, 相應需要在指令行中執行:

$ npm install hexo-deployer-git --save

安裝途中可能會遇到問題:

"npm WARN [email protected] requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself. "

,

這裡親自淌過坑，試了很多方法，最終發現有效的處理辦法是:

$ npm install lodash
$ npm install eslint@^4.12.0

_config.yml

hexo

一開始，我們隻需要修改

deloy

相關才參數即可.

deploy:
	type: git  #上傳類型 選擇git
	repo: https://legege007:[email protected]/legege007/legege007.git  # 執行 git remote -v 可以獲得
	branch: master  # 部署到 Master分支
	#message: update blog # 每次送出的資訊 不填預設為目前時間

隻需要将

repo

改為你的倉庫的

ssh

版位址即可。

同時，你還需要在coding項目中加入自己的

公鑰

，具體方法為:

打開指令行終端輸入

ssh-keygen -t rsa -C <[email protected]>

(你的郵箱)，連續點選 Enter 鍵即可。

Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] 
// 此處推薦使用預設位址，也可在密鑰後面加字尾,即輸入"id_rsa_coding"

找到剛才生成的

id_rsa_coding.pub

，将其中的内容貼到

Coding

的公鑰資訊中：

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

此時，

git

推送應該具有權限了~

目前為止，

_config.yml

配置檔案隻需要改

deploy

這一處！

hexo clean && hexo g && hexo d

hexo

不出意外的話，等指令完全跑完就能從靜态位址

你的使用者名.coding.me

看到你的部落格内容了。

先去域名管理系統中加一條

CNAME

記錄, 比如我的域名是https://enjoy233.cn，此處想綁定到https://www.enjoy233.cn，則添加方法如下：

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

_config.yml

中的

url

從

http://yousite.com

改為實際用的，比如我設定為:

url: //www.enjoy233.cn
root: /

然後在

coding pages

的頁面中設定如下:

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

過幾分鐘後，就能通過域名https://www.enjoy233.cn來通路我的部落格了。

個人覺得

hexo

主題 Material X還挺不錯的，配置文檔為 Material X - Wiki~

就安裝試了一下，首先指令行要做的事情是：

$ cd blog
$ git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x

$ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

然後将

_config.yml

theme

(預設是

landscape

)配置為:

theme: material-x

此時，再使用

hexo clean && hexo g && hexo d

釋出部落格，然後重新整理部落格就能看到使用主題後的效果了。

此處介紹在

Cloud Studio

中使用兩個

branch

建站的方法，

master

分支作為釋出區，

config

分支作為配置區。如果不另建分支，千萬不要使用Cloud Studio的

push

代碼的功能，不然上傳的會是配置相關的所有檔案(真個

blog

檔案夾，而不是僅有

public

檔案夾下的内容)，會導緻部落格無法正常使用。

這裡也親自淌過坑，是以強調一下~

Coding.net

pages

打開網址 https://dev.tencent.com/user/projects/create, 開始建立項目。

我的使用者名是

legege007

，于是就建了個

legege007

的項目.

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

打開網址 https://studio.dev.tencent.com/dashboard/workspace/create, 即可進入Cloud Studio。

我選擇使用了

node.js

的環境來進行配置，同時選中項目

legege007

，然後

建立

即可。

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

Cloud studio中預設是

Linux

系統，我習慣于用root的權限來操作，免得後面還需要用

chmod

之類的指令來改權限，一進IDE界面，使用指令

sudo su

切換即可。

$ sudo su

然後建立

config

分支後，配置主要在該分支上進行。

$ git checkout -b config

其他相關指令使用過程具體如下:

➜  workspace git:(master) sudo su
root@coding:/home/coding/workspace# git checkout -b config

root@coding:/home/coding/workspace# git checkout -b config
Switched to a new branch 'config'

root@coding:/home/coding/workspace# hexo init blog

root@coding:/home/coding/workspace# cd blog/
root@coding:/home/coding/workspace/blog# hexo g

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save

root@coding:/home/coding/workspace/blog# npm audit fix

root@coding:/home/coding/workspace/blog# npm install lodash

root@coding:/home/coding/workspace/blog# npm install eslint@^4.12.0

root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

root@coding:/home/coding/workspace/blog# ssh-keygen -t rsa -C "[email protected]"
root@coding:/home/coding/workspace# cd ~/.ssh
root@coding:~/.ssh# ls
id_rsa  id_rsa.pub  known_hosts
root@coding:~/.ssh# vim id_rsa.pub

root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

上述指令和在

windows

下操作時基本一緻遇到問題，解決問題即可~

_config.yml

_config.yml

檔案的配置、域名綁定、主題使用等等，基本上與在

Windows

下安裝完全一樣，參考Windows下同樣的操作即可，就不再贅述了。

安裝完主題後的界面是:

開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

另外，值得一提的是:

Cloud Studio還有幾個優勢，即:

  • 可以迅速切換環境，比如

    hexo

     、

    node.js

    .net Core

    Ubuntu

    Java

     等互轉，速度超快的。
  • 可以一鍵部署，除了

    coding.me

     的域名可用以外，一鍵部署後，還提供一個

    coding.io

     的域名可以通路。如果暫時沒買個人域名，這就是個大福利了~
開發小白也毫無壓力的hexo靜态部落格建站全攻略 - 躺坑後親訴心路曆程

如有幫助，麻煩在右下角"推薦"一下，多謝~

歡迎在留言區留下你的觀點，一起讨論提高。如果今天的文章讓你有新的啟發，學習能力的提升上有新的認識，歡迎轉發分享給更多人。

歡迎各位讀者加入 .NET技術交流群，在公衆号背景回複“加群”或者“學習”即可。

微信背景回複“asp”，給你：一份全網最強的ASP.NET學習路線圖。

回複“cs”，給你：一整套 C# 和 WPF 學習資源！

回複“core”，給你：2019年dotConf大會上釋出的.NET core 3.0學習視訊！

markdown Hexo 個人部落格 dotNET匠人
上一篇: 有JSON中字段最好是【字元】而非【enum】想到
下一篇: linux常用指令2

繼續閱讀