GitPages部署自己的網站


前言

該文章主要為了記錄我如何在GitPages上面部署博客網站,這里的話,碼雲上面也有相同的功能。
若有小伙伴擔心GitHub擔心把中國的訪問也禁了的話(大概不會吧),可以在碼雲上面部署。流程應該是差不多的。
因為我使用的域名是.cn后綴,所以部署到GitHub上面就不用備案了。碼雲是國內的,應該要備案了,這個就看各位小伙伴的選擇了。
可以看看我的網站:

https://colablog.cn/


開始

第一步,安裝工具

我們需要創建一個空的項目,怎么創建呢?這里我是使用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

啟動后應該可以看見下面的界面
hexo-server頁面

新建名為test的文章測試一下,創建好后在locaohost:4000可以看到新的文章哦。

$ hexo new post test //全寫
$ hexo new test //簡寫,默認為post(文章)

到此為止你已經可以在本地建好博客網站啦。


第三步 使用NexT主題(可跳過)

hexo也有推薦使用的主題列表,入口在這:

https://hexo.io/themes/

不過我沒有去看這些主題,我是使用了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主題

看着是不是怪丑的,特別是第二篇文章,怎么會展示這么多呢?其實可以調整的,反正我是找了好久,在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

修改完后頁面會自己刷新,然后重新回到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/

如果我的文章幫助到您,可以關注我的微信公眾號,第一時間分享文章給您

微信公眾號


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM