使用hexo搭建屬於本身的博客

時間 2019-11-09

標籤使用 hexo 搭建屬於本身博客简体版

原文原文鏈接

若是你喜歡擁有本身的博客域名，若是你喜歡折騰，能夠先點擊luckykun.com，看看效果，再選擇要不要進來看看～～～java

以前一直都在博客園寫博客，不過最近在逛園子的時候不當心看到了hexo,簡直有種相見恨晚的感受呀！在github上建立本身的開源博客，維護方便，主題多多，更重要的是，終於找到只屬於本身的小窩啦！也但願本身能堅持寫文^_^node

爲了引發讀者的興趣，先介紹一下，搭建完成以後，只需這幾個簡單經常使用的命令，就可以輕鬆維護本身的博客了：git

$ hexo new(n)    //寫文章
$ hexo generate(g)    //把文章生成頁面
$ hexo server(s)    //啓動本地服務調試
$ hexo deploy(d)    //部署到github 可與hexo g合併爲 hexo d -g

折騰了大半天，終於搭建好了本身的博客點這裏去看看。不過在這中途，也是歷經了九九八十一難呀，因此，我懷着激動心情，把我在這個過程當中遇到的坑做爲第一篇博客一一記錄下來，但願能幫到後面的學者。github

備註1：若是喜歡以官方教程爲主的，點這裏hexo官方文檔。
備註2：網上大多教程是都是hexo2.x版本的，因此有不少坑。所以如下教程是針對hexo的版本爲3.x以上的，你們放心使用。

準備工做

安裝node
到Node.js官網下載相應平臺的最新版本，一路安裝便可。
安裝git
根據系統不一樣安裝相應的git環境。mac系統很少說，windows通常安裝msysgit。下面是我本地msysgit的截圖，也仍是挺好用的:
安裝hexo
使用如下命令安裝hexo到全局npm
```
$ npm install -g hexo
```
而後輸入命令hexo -v輸入hexo的版本號即爲安裝成功。
github準備
- 博客是在github上託管維護的，因此固然須要一個github的帳號了。而後建立一個名爲jarson7426.github.io的倉庫。
- 其中‘jarson7426’是個人帳戶名，下文同理。
- 除此以外，相信大多數人都知道，要想使用git命令來和github進行提交部署等操做，須要進行一些配置，大概就是下面一些命令，如不明白請自行搜索。windows
```
git config --global user.email xxx@163.com
git config --global user.name xxx
ssh-keygen -t rsa -C xxx@163.com(郵箱地址)      // 生成ssh
找到.ssh文件夾打開，使用cat id_rsa.pub    //打開公鑰ssh串
登錄github，settings － SSH keys  － add ssh keys（把上面的內容所有添加進去便可）
```

初始化

ok，環境都準備好了，開始激動人心的步驟了，搭建博客。瀏覽器

在某個地方新建一個項目文件夾（好比Blog），而後進入Blog目錄，如下全部的命令行操做都是在這個文件夾下進行的。hexo

$ hexo init

生成靜態頁面

初始化完成以後，就已經生成一篇「hello word」的文章了，如今執行如下命令把文章編譯爲靜態頁面：ssh

$ hexo generate

本地啓動

把文章變爲頁面以後，能夠執行如下命令，本地啓動服務，在瀏覽器中輸入http://localhost:4000/查看生成的頁面效果。動畫

$ hexo server

若是你看到了下面這個畫面，恭喜你，你成功了！

更換主題

上面的博客效果是hexo本身默認的主題landscape，若是你知足與它，能夠跳過這個步驟，直接進行下一步。可是我卻還不夠知足，由於我發現了一個頁面交互人性化，而且完美兼容不一樣終端顯示的主題yilia，貌似這個主題受歡迎程度很高呀，說明個人審美仍是不錯啊，哈哈~~

下面貼出github上star數量最多的前10個主題：

1.iissnan/hexo-theme-next， 3510個star。
2.litten/hexo-theme-yilia， 1703個star。
3.TryGhost/Casper， 679個star。
4.wuchong/jacman， 503個star。
5.A-limon/pacman， 431個star。
6.daleanthony/uno， 416個star。
7.orderedlist/modernist， 367個star。
8.AlxMedia/hueman， 336個star。
9.kathyqian/crisp-ghost-theme， 303個star。
10.xiangming/landscape-plus， 287個star。

clone主題代碼
在目錄下執行下面的命令clone主題代碼：

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改配置文件
修改Blog/_config.yml文件：

theme: yilia    //默認爲landscape

修改themes/yilia/_config.yml文件：

# Header
menu:
    主頁: /
    全部文章: /archives
    絲茉茉: /categories/simomo/
    相冊: /photos
# SubNav
subnav:
    github: "https://github.com/jarson7426"
     weibo: "http://weibo.com/u/2732624311"
    zhihu: "#"
    rss: /atom.xml
# Content
excerpt_link: 閱讀全文
fancybox: true
mathjax: true
top: true
# 是否開啓動畫效果
animate: true
# 是否在新窗口打開連接
open_in_new: false
# Miscellaneous
google_analytics: ''
favicon: /favicon.ico
#你的頭像url
avatar: /img.png
#是否開啓分享
share_jia: true
share_addthis: false
#是否開啓多說評論，填寫你在多說申請的項目名稱 duoshuo: duoshuo-key
#若使用disqus，請在博客config文件中填寫disqus_shortname，並關閉多說評論
duoshuo: jarson7426
#是否開啓雲標籤
tagcloud: true
#是否開啓友情連接
#不開啓——
friends: false
#開啓——
#friends:
#  百度一下: http://www.baidu.com
#  淘寶商城: http://www.taobao.com
#是否開啓「關於我」。
#不開啓——
#aboutme: false
#開啓——
aboutme: true

查看效果
更改主題以後可使用命令hexo server打開本地服務，查看效果。

部署到github

上面全部的操做完成以後，你就能夠將你的Blog項目部署到github上了。

部署以前先修改Blog/_config.yml文件。
```
deploy:
    type: git
    repository: https://github.com/jarson7426/jarson7426.github.io.git  //jarson7426替換爲你本身的用戶名
    branch: master
```
備註：在hexo3.x版本下，這裏的type應該填git，不是github；另外冒號後面都有一個英文的空格，否則會報錯的。
而後使用如下命令進行部署。
```
$ hexo deploy
```
備註：若是執行上述命令報錯，你能夠試試下面這個命令再試。
```
$ npm install hexo-deployer-git--save
```

部署成功後，你在瀏覽器中輸入jarson7426.github.io，就能看到和本地同樣的效果了。