前言
該文章主要為了記錄我如何在GitPages上面部署博客網站,這里的話,碼雲上面也有相同的功能。
若有小伙伴擔心GitHub擔心把中國的訪問也禁了的話(大概不會吧),可以在碼雲上面部署。流程應該是差不多的。
因為我使用的域名是.cn后綴,所以部署到GitHub上面就不用備案了。碼雲是國內的,應該要備案了,這個就看各位小伙伴的選擇了。
可以看看我的網站:
開始
第一步,安裝工具
我們需要創建一個空的項目,怎么創建呢?這里我是使用Hexo的博客框架,
他會使用Markdown引擎快速渲染出靜態頁面。
安裝hexo的前提是需要安裝好下面的應用程序:
Node.js (Should be at least nodejs 6.9)
Git
然后使用npm安裝Hexo。(建議去配置個淘寶的cnpm鏡像,快賊多)
$ npm install -g hexo-cli
第二步,hexo創建項目
我們需要使用hexo建立一個空的項目,這里的項目名為blog。
$ hexo init blog
$ cd blog
$ npm install
為了在可以在本地調試效果,我們需要安裝hexo-server,就是Hexo的服務器
$ npm install hexo-server --save
然后啟動hexo-server,訪問的網址的localhost:4000
$ hexo server
啟動后應該可以看見下面的界面
新建名為test的文章測試一下,創建好后在locaohost:4000
可以看到新的文章哦。
$ hexo new post test //全寫
$ hexo new test //簡寫,默認為post(文章)
到此為止你已經可以在本地建好博客網站啦。
第三步 使用NexT主題(可跳過)
hexo也有推薦使用的主題列表,入口在這:
不過我沒有去看這些主題,我是使用了NexT的主題,入口在這:
http://theme-next.iissnan.com/theme-settings.html#author-sites
首先我們克隆最新的NexT版本,
$ cd <你的項目目錄>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
然后在hexo的配置文件(_config.yml)文件里面,找到theme
字段,修改如下:
theme: next
個人覺得next默認的主題樣式還是比較丑的,我們可以在next主題下看到還有另外三種樣式,搜索關鍵字
Schemes
可以看到如下主題,我使用的第三個Pisces
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
主題如下:
看着是不是怪丑的,特別是第二篇文章,怎么會展示這么多呢?其實可以調整的,反正我是找了好久,在next主題下,
搜索關鍵字auto_excerpt
,修改如下:
auto_excerpt:
enable: true //開啟該功能
length: 150 //首頁展示的字數限制
到此為止我們已經可以使用NexT主題啦。更詳細的配置就進去官網看看吧(上面有)。
第四步 部署到GitHub
首先,我們要在GitHub上面創建一個倉庫,這里我叫做blog吧。
然后我們需要把我們本地的blog項目初始化一下。
$ cd <你的本地項目目錄>
$ git init
$ git add -A //把全部都添加進去吧,也沒啥
$ git commit -m "首次提交"
$ git remote add origin <你自己的倉庫路徑,例:https://github.com/xxx/blog.git>
$ git push -u origin master
然后我們進入blog倉庫的setting中,然后往下拉看到GitHub Pages
修改完后頁面會自己刷新,然后重新回到GitHub Pages
這部分。你會看到他給了你一個網址,沒錯!就是這個網址,
你打開試試!!試試就試試,404...。
你先記住這個網址,咱們先把這個網址叫做博客網址
吧。
其實部署到GitPages上面的話,hexo還是要做一些設置的,不然他怎么知道你要部署到那個地方去哦。設置完后以后部署文章會很簡單的:
設置你項目的root路徑,在hexo配置文件(_config.yml)中,搜索關鍵字root
, 改為你的倉庫名稱,如下:
# URL
root: /blog
在hexo的配置文件(_config.yml)中,搜索關鍵字deploy
(其實就在最下面),設置如下:
deploy:
type: git
repo: <你的倉庫地址> //https://github.com/xxx/blog.git
branch: master
安裝hexo-deployer-git,
$ cd <你的項目目錄>
$ npm install hexo-deployer-git --save
然后你再執行下面這條命令就OK了!
$ hexo generate --deploy //全寫
$ hexo g -d //縮寫
趕緊打開上面說的博客網址
看看,是不是404!,沒錯!
等一會吧,GitHub還沒緩過來呢,執行完命令之后大概差不多一分鍾之后刷新一下,
你就可以看到你夢寐以求的頁面了。
以后咱們創建文章就很簡單了,新建並且編寫好文章之后,執行使用部署到服務器的命令就Ok了。操作如下:
$ hexo new <文章名> //新建文章
$ hexo g -d //部署到GitHub,你就可以看到的新文章啦!
畢竟第一次難免是比較困難。嗯,沒錯,我說的是部署GitPages。
如果你也是跟着我這篇文章一步一步走的話,應該是沒什么毛病的,因為我是自己重新部署一個項目的,
然后一步一步的把步驟記錄下來的。如果有什么問題的話,可以留言一下,或致郵箱821312534@qq.com。謝啦。
我的博客即將同步至騰訊雲+社區,邀請大家一同入駐:https://cloud.tencent.com/developer/support-plan?invite_code=qqkpn94ul1vr
個人博客網址: https://colablog.cn/
如果我的文章幫助到您,可以關注我的微信公眾號,第一時間分享文章給您