使用 hexo 搭建個人部落格

只是一個id發表於2019-02-16
Hexo

本地搭建 hexo

<!– more –>

  • 構建hexo需要在本地安裝node.js

brew install node

當前版本的node版本

node -v
v7.7.3

<!– more –>

  • 全域性安裝 hexo

npm install -g hexo

國外映象慢的話可以搜尋找下淘寶的 cnmp

  • 建立一個目錄並且安裝 hexo

mkdir hexo_blog
cd hexo_blog
hexo init
npm install

  • 新建一個文章

hexo new "your-first-page"

檔案在 hexo_blog/source/_post/下進行編輯啊

  • 然後就是生成靜態檔案

hexo generate
hexo server

這時就可以訪問 http://localhost:4000 來檢視效果，這個時候hexo已經搭建成功了，
但是我們需要外網能夠訪問，這就用到了今天的另一個主角：github page

將 hexo 放到github上

  • 需要一個github賬號，具體申請登入看 https://github.com 上的引導就行

  • 建立一個新的 repository 名字格式是固定的，比如我的賬戶名是 gaopengfei123123 那麼這個庫的名字就是 gaopengfei123123.github.io 不能改的哦

  • 為了可以直接提交遠端檔案需要新增 ssh 密匙
    本地操作

ssh-keygen -t rsa -C "5173180@qq.com” -f ~/.ssh/github-rsa
cat ~/.ssh/github_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC3K5mcQxH9mu1cUIu2+byK1iksES/7Tnfh23l2U6y1fOKO4XFhPLdAoMQdePnI51PAF4faXxucOYsiDb6IpQimWPwORKTkEkcglOiZ414eZZ829gY98RAldbFQeT2L9A0l2APfcan1fH4HvrCmZKlY8CNDQDDfRzXub9hfSX3LS5mQlgS9PHiFoXRfrS10hYweere9Cb9OFiEdkdCfMKUBr25ImGahqbHxE8Vb3QzMT8Q5PBITqFwYnIE/z6HU6Lok92EZ/uVG81SMJb9A5SQCZdsjWmyDqXj1eDZ1A2YyUlA+/6QM7JjCrLoZAAtZHTH+ylNAG79w9WG0eYAuL GaoPengFeiFiy@github.com

把這一段完整的複製到 https://github.com/settings/keys 這個地址下，新增一條新的ssh-key，這樣就能免登入提交版本檔案

  • 現在編輯本地hexo根目錄下的站點配置檔案 path/to/hexo_blog/_config.yml
    查詢欄位 deploy 編輯成這樣

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:gaopengfei123123/gaopengfei123123.github.io.git
  branch: master

設定好後，就將本地生成的靜態檔案發到github上

hexo deploy

#如果報錯就可能是少個外掛
npm install hexo-deployer-git

  • 進入 你的版本庫地址/settings 比如我的就是 https://github.com/gaopengfei123123/gaopengfei123123.github.io/settings
    找到 github pages 設定塊按照你的需求調整，這時訪問 https://gaopengfei123123.github.io就能訪問 hexo 上傳的內容了

繫結一個自己的域名，通過它來訪問github pages

我用的是阿里雲的萬網來舉例

  • 首先進入到萬網雲解析的頁面

記錄型別：A
主機記錄：blog
記錄值：xxx.xxx.xxx  #這裡需要 ping -c 3 https://gaopengfei123123.github.io 獲取ip地址

  • 然後返回到 你的版本庫地址/settings 這裡，將 Custom domain 設定成你剛才解析的名字，
    與此同時在github上版本的根目錄下新增一個檔案 CNAME 內容是

#in CNAME
blog.justwe.site

這時再返回settings中就能看的 github pages 部分的域名繫結的是你的域名了，到這裡部落格算是搭建成功了

hexo官網

hexo的next模版官網

部落格原文

相關文章