1. 程式人生 > >如何快速的搭建hexo部落格,並且換主題

如何快速的搭建hexo部落格,並且換主題

1.首先要先安裝git和node.js。

在安裝Node.js時要注意以下幾點:

除了修改預設安裝路徑外,只要一路next就可以了。安裝後執行cmd輸入以下命令檢查是否安裝成功。



安裝完的目錄如下:


此處說明下:新版的Node.js已自帶npm,安裝Node.js時會一起安裝,npm的作用就是對Node.js依賴的包進行管理,也可以理解為用來安裝/解除安裝Node.js需要裝的東西。

然後還要配置環境:

說明:這裡的環境配置主要配置的是npm安裝的全域性模組所在的路徑,以及快取cache的路徑,之所以要配置,是因為以後在執行類似:npm install express [-g] (後面的可選引數-g,g代表global全域性安裝的意思)的安裝語句時,會將安裝的模組安裝到【C:\Users\使用者名稱\AppData\Roaming\npm】路徑中,佔C盤空間。


例如:我希望將全模組所在路徑和快取路徑放在我node.js安裝的資料夾中,則在我安裝的資料夾【D:\Develop\nodejs】下建立兩個資料夾【node_global】及【node_cache】如下圖:


建立完兩個空資料夾之後,開啟cmd命令視窗,輸入

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下來設定環境變數,關閉cmd視窗,“我的電腦”-右鍵-“屬性”-“高階系統設定”-“高階”-“環境變數”

進入環境變數對話方塊,在【系統變數】下新建【NODE_PATH】,輸入【D:\Develop\nodejs\node_global\node_modules】,將【使用者變數】下的【Path】修改為【D:\Develop\nodejs\node_global】

六、測試

配置完後,安裝個module測試下,我們就安裝最常用的express模組,開啟cmd視窗,
輸入如下命令進行模組的全域性安裝:

npm install express -g     # -g是全域性安裝的意思

2.安裝好git和node.js後下一步就是安裝hexo了。

建立一個你用來存放部落格的資料夾,在資料夾下右擊滑鼠,開啟gitbash,輸入命令:npm install -g hexo

安裝完成後,用以下命令檢視版本,如果檢視失敗則安裝失敗。


然後初始化部落格,輸入命令:hexo init。如果初始化成功,在你的部落格資料夾裡會出現以下情況。


  • 解釋一下:
    • node_modules:是依賴包
    • public:存放的是生成的頁面
    • scaffolds:命令生成文章等的模板
    • source:用命令建立的各種文章
    • themes:主題
    • _config.yml:整個部落格的配置
    • db.json:source解析所得到的
    • package.json:專案所需模組專案的配置資訊
  • 做好這些前置工作之後接下來的就是各種配配配置了。

3.搭橋到github上

沒賬號的建立賬號,有賬號的看下面。

  1. 建立一個repo,名稱為yourname.github.io, 其中yourname是你的github名稱,按照這個規則建立才有用哦,如下:

new-repo
create-repo

  1. 回到gitbash中,配置github賬戶資訊(YourName和YourEail都替換成你自己的):

username
email

  1. 建立SSH
    在gitbash中輸入:ssh-keygen -t rsa -C "[email protected],生成ssh。然後按下圖的方式找到id_rsa.pub檔案的內容。

ssh-key

  1. 將上面獲取的ssh放到github中:

settings
ssh-key
新增一個 New SSH key ,title隨便取,key就填剛剛那一段。

  1. 在gitbash中驗證是否新增成功:ssh -T [email protected]

  2. 完成下一步你就成功啦!

4.修改部落格資料夾下的_config.yml檔案的一些配置。(冒號之後都是有一個空格)

開啟檔案後。基本會在檔案的末尾找到並修改為以下樣式。

deploy:

type: git

repo: https://github.com/YourgithubName/YourgithubName.github.io.git

branch: master

然後在gitbash中執行以下程式碼:

hexo clean

hexo generate

hexo server

但是如果你的hexo版本是3.0以上的,它會把伺服器獨立成個別模組,這時你要在gitbash上執行程式碼:npm install hexo-server 從而單獨安裝伺服器模組。

完成以上的操作後

開啟瀏覽器輸入:http://localhost:4000

但是在開啟瀏覽器之前你要保證:程式碼;hexo server保證以下的狀態


如果你按Ctri+c鍵後就會停止執行伺服器了,這時你的部落格就會打不開了。

5.接下來就是把你的部落格同步到github從而別人就可以直接通過http://yourgithubname.github.io,訪問你的部落格了。其中yourgithubname是你的github名字。

現在gitbash上安裝一波,npm install hexo-deployer-git --save(這樣才能將你寫好的文章部署到github伺服器上並讓別人瀏覽到)

然後執行命令:

hexo clean

hexo generate

hexo deploy

其中在執行hexo deploy過程中會讓你輸入你的github的username和passward.

最後會出現以下樣式:


  • 在瀏覽器中輸入http://yourgithubname.github.io就可以看到你的個人部落格啦,是不是很興奮!
  • 感覺gitbash中東西太多的時候輸入clear命令清空。

7. 繫結個人域名

  • 不想繫結的自行忽略
  • 第一步購買域名:隨便在哪個網站買一個就好了,小花是在阿里雲購買的visugar.com, DNS也是順道在那買的。
  • 第二步新增CNAME:在專案的source資料夾下新建一個名為CNAME的檔案,在裡面新增你購買的域名,比如我新增的是visugar.com,只能新增一個哦。
  • 到DNS中新增一條記錄:
    dns-note
    其中ip地址為你的github的地址,可在cmd中ping一下就能看到(ping yourname.github.io):
    github-ip
  • 接著再次部署一下,用你購買的域名開啟,就可以看到你的部落格啦~

8.更改你的hexo主題。

當你想要換一個主題時,首先你要先找到你想要的主題,你可以通過https://hexo.io/themes/找到你要的主題的github地址,或則直接在github上找你想要的主題。在你的部落格資料夾下開啟gitbash(或則在其它的地方開啟gitbash,但是要輸入命令 cd+空格+你的部落格目錄路徑)輸入以下命令,用來把github主題倉複製到你想要的地方:

git clone https://github.com/theme-next/hexo-theme-next themes/next其中https://github.com/theme-next/hexo-theme-next代表了你要的主題的github地址。themes/next代表你要把它放在themes資料夾下的next資料夾下git克隆完成後,開啟部落格目錄下的“_config.yml”配置檔案。找到theme的配置選項,一般在檔案的最下方將theme選項配置為我們新下載好的主題的檔名。其中next就是從github上克隆的主題檔案的存放地的檔案的名字。最後就是除錯,釋出。再回到gitbash上,輸入以下程式碼:hexo server --debug

如圖,在瀏覽器中輸入localhost:4000檢視,(每次用localhost:4000檢視部落格時,都要先在gitbash上執行hexo server程式碼,保持以下狀態;

否則會出錯)

在本地檢視無誤之後,輸入生成和釋出命令,就可已將新主題釋出到自己的部落格網站上了。

$ hexo generate
$ hexo deploy
  • 如出現快取引起的異常,可以在生成命令前執行清除快取命令,
hexo clean修改主題後再次提交到github,此時就可以讓別人也能看到你修改主題後的部落格。提交到gihub的過程為:不是第一次提交時只需要輸入以下命令就可以了;

執行命令(建議每次都按照如下步驟部署):

hexo clean
hexo generate
hexo deploy
此時你再次訪問你的部落格就會發現已經更換了主題。

相關推薦

如何快速搭建hexo部落並且主題

1.首先要先安裝git和node.js。在安裝Node.js時要注意以下幾點:除了修改預設安裝路徑外,只要一路next就可以了。安裝後執行cmd輸入以下命令檢查是否安裝成功。安裝完的目錄如下:此處說明下:新版的Node.js已自帶npm,安裝Node.js時會一起安裝,npm

使用Hexo搭建個人部落極速高效簡潔,新手小白可操作

目錄 只需要兩步 第一步程式碼部分: 第二部分放置程式碼 https://www.cnblogs.com/blogjun/articles/8289977.html 詳細操作可參考上文 這裡說一下大概的原理吧(純屬個人觀點,如有疑問請評論回去,接懟) 只需要兩步

從零開始 利用hexo在github上快速搭建個人部落

利用hexo在github上快速搭建個人部落格方案選型主流的三種部落格搭建方案:1. Git+Github+Markdown+jekyll (免費) 2. Git+Github+Markdown+hexo (免費) 3. 虛擬主機+外掛+Wordpress (付費)123我的選擇: Git+Github+Ma

Hexo+Netlify快速搭建個人部落

最近想要給自己搭建一個部落格網站,貨比三家後,決定選擇Hexo.io來建站,Netlify來進行程式碼託管和部署。 長話長說,在轉行寫前端之前,我曾做過一段時間網站內容編輯,當時主要使用的是Wordpress。作為傳統動態網站生成器的代表,Wordpress擁有超高市場

Hexo搭建獨立部落託管到Github和Coding上教程

前言 這是一篇很詳細的獨立部落格搭建教程,意在幫助小白們能快速入門,擁有自己的獨立部落格。作者已在window平臺已搭建成功,部落格效果請點連結檢視。 為什麼用Hexo搭建獨立部落格? Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用

使用GitHub Pages + Hexo 快速搭建個性化部落(二)-購買並解析域名

購買域名 在此選擇的Godaddy, 登入官網http://www.godaddy.com,註冊賬戶 ————————我是間隔線—————————— 登入後選擇購買域名服。 —

搭建Hexo部落系統

也許這個教程部署不是特別詳細,因為我主要是參考這個連結:https://blog.csdn.net/weixin_39879178/article/details/80319392 感覺這裡已經寫的很詳細了,所以有些我也就不再重複了。完全小白可以參考這個連結。有一定的基礎,可以參考我的這個教程安裝。必定能馬

使用 Python 10分鐘 教你快速搭建一個部落

10個優秀的程式設計師裡,有9個人都有寫部落格的習慣。這是非常好的習慣,它使得知識得以提煉,轉輸出為輸入,在提升自己的同時,還能利用網際網路易傳播的特性,將知識分享給每一個熱愛學習的人。               &n

Mac搭建Hexo部落及NexT主題配置優化

前言 最近看到陽春麵的部落格,感覺非常漂亮,正好最近也想自己搭個部落格,記錄一下自己的學習經歷和生活感悟,給自己留下點回憶,同時整理一下自己的思路,於是就想仿照著弄一個類似的靜態部落格網站,正好最近有時間,而且內心搭部落格的念頭越來越洶湧,所以,說幹就幹! 主要內容 拉到陽春

在伺服器/GitHub上搭建Hexo部落

  本文章首發於:http://www.xtstarry.top/index.php/2018/07/24/在伺服器-github上搭建hexo部落格/ 前言 Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在

Docker快速搭建個人部落網站(wordpress+mysql)

1、基本知識 本著“容器只幹一件事情”的原則,本文會將出現兩個容器,一個Wordpress的網站程式的容器,另一個則是MySQL的資料庫容器,從中將看到兩個容器是如何協同工作的。本文的命令操作具體可見Docker入門。 2、啟動MySQL容器 do

從零開始在伺服器搭建Hexo部落

也可以點選該連結:http://106.12.200.86/post/5454b416.html#more 一、開發環境 ubuntu16.04 node.js github Windows10 64bits 二、在本地Windows上搭建He

一分鐘搭建wordpress部落完美解決所有坑點

文章目錄 前言 一、站點解釋 二、開始安裝 前言 這裡是在已經使用了一鍵安裝包的基礎上的教程,如果未使用教程,僅供參考! 如果想要使用一鍵安裝lnmp環境,請移步之前的博文。 連結:https://blog.csdn.net/qingl

基於CentOS搭建Hexo部落

前言 本文介紹的是如何在CentOS系統上使用Hexo部落格框架搭建一個完全屬於自己的部落格系統。 知識儲備 CentOS是什麼? Hexo是什麼? Nginx是什麼? Git是什麼? Node.js是什麼? CentOS是什麼?

搭建Hexo部落(Next主題)中踩過的坑

Hexo Next 系統重灌等導致hexo不可用 npm install -g hexo-cli npm升級所有可更新包 shell指令碼 使用shell指令碼升級npm包,首先所在找到需要升級的包和版本號,再使用

Hexo搭建GitPage部落系列】04.主題更換

前言 前面我們介紹瞭如何從零開始搭建Hexo部落格,並且已經部署到Github上去了。每個人的審美觀不一樣,所以肯定會有人不喜歡當前的部落格主題。接下來,我就為大家介紹如何更換部落格主題,讓部落格變得更加炫酷。 主題切換 Hexo的預設主題是landscape,就是

使用 Python 30分鐘 教你快速搭建一個部落

10個優秀的程式設計師裡,有9個人都有寫部落格的習慣。這是非常好的習慣,它使得知識得以提煉,轉輸

Hexo+GitHub搭建靜態部落平臺(三)-Next主題基本使用

部落格網站搭建好後就是為自己的網站設定一個美觀的主題了, hexo 官方提供了許多官方主題,還有許多別人編寫的主題,例如:hexo-theme-jekyll 和 hexo-theme-yilia。還有很多就不一一列舉了,我將介紹也是我在使用的 Next主題 。

搭建Hexo部落在git上執行 hexo d /hexo g 報錯:ERROR Local hexo not found in D:\hexo 解決

Hexo搭建部落格的時候,已經使用命令在cmd中下載了依賴包,但是執行 hexo d 和hexo g 報錯,報錯如截圖:ERROR Local hexo not found in D:\hexoERROR Try running:'npm install hexo --sav

使用github搭建Hexo部落

今天搞了一晚上搭建Hexo部落格,發現異常得簡單~寫篇部落格記錄下搭建部落格的框架有很多,學長用的是WordPress,今天拿了Hexo練了下手。首先這個部落格框架是用node.js寫的,首先就是安裝node.js的環境----------------------------