1. 程式人生 > >搭建好看的靜態博客(使用Hexo進行搭建)

搭建好看的靜態博客(使用Hexo進行搭建)

ssi 名稱 時間 module request -c ssh key lose 靜態博客

經常看到大牛的博客非常的高大帥氣,雖然我很渣,但是逼格不能輸,所以有了以下的搭建記錄。

我的成果ninwoo,喜歡的可以參考下面的記錄一起來動手搞起來。

安裝Git Bash

訪問git下載最新版本的git bash

安裝完成之後,右鍵打開git bash,設置用戶名和郵件信息

git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub註冊郵箱"

生成ssh秘鑰文件

ssh-keygen -t rsa -C "GitHub註冊郵箱"

直接三個回車即可,默認不需要設置密碼。

查看生成的公鑰

cat ~/.ssh/id_rsa.pub

復制內容,打開github setting keys界面,創建新的SSH key,並粘貼公鑰到Key輸入框中。

在git bash中測試是否配置成功

ssh [email protected]

出現:

PTY allocation request failed on channel 0
Hi Ninwoo! You‘ve successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

證明設置成功。

創建GitHub倉庫

創建新的倉庫,倉庫名為[用戶名].github.io,用戶名用Github名稱代替。

這樣做的主要目的就是為了以後可以通過該網址進行訪問你的博客主頁,所以要仔細設置。在這裏,我配置成Ninwoo.github.io
以下的配置中,也需要對應修改為你自己的倉庫名。

安裝Node.js

訪問Node.js官網下載安裝包。

下載完成後,點擊安裝。打開CMD查看是否安裝成功。

C:\Users\ljo04>node -v
v8.12.0

C:\Users\ljo04>npm -v
6.4.1

如果上述命令均正常通過,則安裝完成。

安裝Hexo

1.創建一個新的文件夾作為Hexo的開發目錄,這裏我命名為Hexo_project

E:\project>mkdir Hexo_project

2.使用npm安裝Hexo

為了提高安裝速度,先配置淘寶npm鏡像

E:\project\Hexo_project>npm config set registry https://registry.npm.taobao.org

3.安裝Hexo

E:\project\Hexo_project>npm install -g hexo-cli

4.初始化hexo

E:\project\Hexo_project>hexo init blog
INFO  Cloning hexo-starter to E:\project\Hexo_project\blog
Cloning into ‘E:\project\Hexo_project\blog‘...
remote: Counting objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 67
Unpacking objects: 100% (68/68), done.
Submodule ‘themes/landscape‘ (https://github.com/hexojs/hexo-theme-landscape.git) registered for path ‘themes/landscape‘
Cloning into ‘E:/project/Hexo_project/blog/themes/landscape‘...
remote: Counting objects: 838, done.
remote: Compressing objects: 100% (6/6), done.
Receiving objects:  26% (222/838), 292.01 KiB | 88.00 KiB/s

這個過程可能需要等待一陣時間

5.測試站點是否創建成功

# 創建一篇博客test
E:\project\Hexo_project\blog>hexo n test

# 生成博客
E:\project\Hexo_project\blog>hexo g

# 啟動服務器預覽
E:\project\Hexo_project\blog>hexo s

這時,可以打開瀏覽器訪問http://localhost:4000/,查看blog界面,發現已經創建好新的文章test。

推送至網站

1.修改blog配置文件E:\project\Hexo_project\blog\_config.yml

deploy:
  type: git
  repo: [email protected]:Ninwoo/ninwoo.github.io.git
  branch: master

註意:這裏repo要選擇ssh的git庫鏈接,否則會在部署的時候報錯

2.安裝Git部署插件

E:\project\Hexo_project\blog>npm install hexo-deployer-git --save

3.部署博客

E:\project\Hexo_project\blog>hexo clean
E:\project\Hexo_project\blog>hexo g
E:\project\Hexo_project\blog>hexo d

4.測試是否部署成功

現在訪問https://ninwoo.github.io/ ,如果出現blog界面這證明部署成功。

更換主題

如果覺得默認主題實在是太醜,可以更換其他主題,下面的教程中,我選擇Next主題。

1.下載主題

E:\project\Hexo_project\blog> git clone https://github.com/theme-next/hexo-theme-next themes/next

2.打開配置文件E:\project\Hexo_project\blog\_config.yml更換主題

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
plugins: hexo-generate-feed

3.重新部署blog

E:\project\Hexo_project\blog>hexo clean
E:\project\Hexo_project\blog>hexo g
E:\project\Hexo_project\blog>hexo d

小節

到這裏,高端大氣上檔次的Blog就創建完成了,讀者可以開始編寫自己的blog啦!

搭建好看的靜態博客(使用Hexo進行搭建)