Coding Pages 搭建 Hexo 靜態博客

安裝hexo

我的小窩:https://zelsonia.coding.me/hexo/

  • 準備:node.js(npm), git, coding賬號
  1. npm install -g hexo 安裝hexo

  2. 在本地sites下新建空文件夾來放置hexo touch hexo

  3. 初始化 hexo init

  4. 本地打開查看是否運行成功

$ hexo g
$ hexo s 
這兩行命令是下面兩個的縮寫
hexo generate
hexo server

網址輸入localhost:4000 查看效果

安裝next主題

git clone git@github.com:iissnan/hexo-theme-next.git themes/next
如果想要其他主題,自行搜索,把ssh替換上面的git@github.com:iissnan/hexo-theme-next.git

  1. 安裝好后,在根目錄下的_config.yml配置文件修改
    修改Hexo目錄下的config.yml配置文件中的theme屬性,將其設置為nexttheme:next
    注意:Hexo有兩個config.yml文件,一個在根目錄,一個在theme下,此時修改的是在根目錄下的。

  2. 清除緩存,重新生成,查看localhost:4000,看主題是否生效

hexo clean 清除緩存 網頁正常情況下可以忽略此條命令
$ hexo g
$ hexo s

修改配置文件

coding新創建項目,把ssh copy下來,修改根目錄的配置文件_config.yml,注意縮進,還有冒號后的空格

deploy:
  type: git
  repository:
      #github: git@github.com:ShomyLiu/ShomyLiu.github.io.git還可以github也一起
      coding: git@git.coding.net:shomyliu/shomyliu.git
  branch: master

在博客的source/目錄下需要創建一個空白文件,至于原因,是因為 coding.net需要這個文件來作為以靜態文件部署的標志。就是說看到這個Staticfile就知道按照靜態文件來發布。
coding還需要在根目錄下建一個.nojekyll空文件(coding page 配置hexo報錯 the xx theme not be found
在根目錄下建一個.nojekyll空文件就可以了,因為Coding默認支持Jekyll搭建網站)

cd source/
touch Staticfile 

cd ../
到hexo
touch .nojekyll

上到coding

  1. npm install hexo-deployer-git --save
    安裝這個,要不之后會報錯error deployer not found:git

  2. 上到coding
    hexo clean
    hexo d -g
    如果報錯了,看看是不是之前提到過的報錯。

  3. coding 上選擇pages, 選master分支,他就自行部署了。成功后,若是沒有樣式,需要更改一下_config.yml文件,其中的url和root屬性。

url:http://zelsonia.coding.me/hexoTest/
root: /hexoTest

ps: 整個這個文件夾不需要git init,push之類的操作。

報錯

ERROR Script load failed: themes\next\scripts\tags\exturl.js
Error: Cannot find module 'hexo-util'

運行npm install hexo-util --save

next進階

站點配置hexo/_config.yml

語言,和個人信息的部分,下面列出應該需要修改的,有的可能某一種theme下看不到

language: zh-Hans 
author
title
subtitle
description

主題配置next/_config.yml

tag頁面點了404

添加目錄云、標簽云頁面,不添加就會404
hexo new page "tags"
hexo new page "categories"
把主題配置文件里menu里對應的注釋去掉,menu上就能看到分類和標簽

添加新頁面后,他的中文怎么改

如果添加了新的單詞,就要添加翻譯在文件里
languages/{language}.yml,例如簡體中文就是zh-Hans.yml

側邊欄

sidebar positon
側邊欄位置,left,right

頭像

avatar: url或者 /images/avatar.jpg
圖片放在source/images下

縮略圖

網站縮略圖標icon
favicon: /favicon.ico
縮略圖可以在這個網站做http://tool.lu/favicon/

代碼高亮

code hightlight 高亮

github鏈接

social:
  #LinkLabel: Link
  GitHub: https://github.com/zelsonia

圖標是social_icons

日志發布

發布新日志,新博客

hexo new "Hello"

然后到source/_post下編輯同名md文件再clean && d -g

ps: md文件里 ##后面需要空格

刪除日志

直接_post下刪了,再clean,d -g

日志添加分類,標簽

生成md文件時,在頂部會有填寫分類標簽的地方,像這篇我就是這樣寫的

categories: hexo
tags: [hexo,node.js]

下面的日志,分類,標簽是有了1個后才會出來,日志本來就有一篇,所以其他的兩個一開始是沒有的。

放音樂

打開網頁版網易云音樂。
如果只是加入單曲,只需要搜索歌曲,點開歌曲名,點擊生成外鏈播放器,復制html代碼(可以選擇是否自動播放),將html代碼無需任何修改放入markdown文章里就OK了。
如果想要加入歌單,就需要自己創建歌單,然后分享歌單,找到自己的分享動態,點進去可以看到有“生成外鏈播放器”這些字眼,其余操作就和上面一樣了。不過,你的歌單有變化的話,這個外鏈的歌曲同樣跟著變,這一點挺棒的。

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=471374061&auto=1&height=66"></iframe>

嵌入不自動播放只需要把以上代碼中的auto改為=0即可,樣子是這樣的

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=471374061&auto=1&height=66"></iframe>

閱讀更多 設置

在文章的想要截斷的區域, 添加這個``

其他應用

每篇文章的閱讀量

http://www.tuicool.com/articles/YB3EJnz
注意事項是:config里已經有appid等參數,還有中文翻譯那里也已經存在

本地圖片方便引入

http://www.lxweimin.com/p/c2ba9533088a

  1. 首先確認_config.yml 中有 post_asset_folder:true
  2. hexo下執行npm install https://github.com/CodeFalling/hexo-asset-image --save
  3. 之后新建的md會在_posts下出現同名文件夾,是放圖片的,之后![](articleName/logo.jpg)

rss訂閱

http://www.lxweimin.com/p/264024768d03
這個教程的問題是
plugins: hexo-generate-feed這是一行的,上面寫成兩行會報錯

首頁footer頁尾修改

首先,找到 \themes\next\layout_partials\下面的footer.swig文件,打開會發現,那兩行就是最后三段
可以把div里的改成{{ __('footer.powered') }} 去翻譯的文件里footer那里添加就行不要重復。

統計,評論,搜索

http://theme-next.iissnan.com/third-party-services.html#algolia-search
next官方給的好多擴展,我用了

  • 網易云跟帖 評論(需要一級域名)
  • 百度統計 人次
  • 不蒜子統計 首頁統計
  • Algolia 搜索

里面都很詳細了。
幾點注意:1.百度統計不是站點上顯示,是去那邊看人次和次數。
2.hexo algolia 搜索,新增文章都要執行添加進index

沒有一級域名,就暫時不能搞評論了。

更新hexo

更新hexo:
npm update -g hexo

更新主題:
cd 到主題文件夾,執行命令:
git pull

更新插件:
npm update

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一章 安裝Git工具 下載GitHub for Windows,直接點擊安裝,安裝完成后,可以看到“Git Sh...
    不圓的石頭閱讀 11,926評論 5 63
  • 環境配置 Hexo官網上本就有對Hexo安裝及使用的詳細介紹,強烈推薦。這里來講述自己安裝的親身步驟,或有區別。 ...
    jovelin閱讀 1,571評論 2 2
  • 親愛的乖乖: 今天媽媽去參加智慧父母心理學課堂,講課的老師是我們大家都喜歡的一位叫王威的心理學老師。上了一天的課有...
    喵星人媽媽閱讀 371評論 7 5
  • 1. 線程池的概念 1.1 基本概念 由于線程的生命周期中包括創建、就緒、運行、阻塞、銷毀階段,當我們待處理的任務...
    Java旅行者閱讀 1,615評論 0 31
  • 每當感受到此刻的暑氣,心里有一絲慶幸,還好你終于不必在度過這樣的炎炎夏日,在承受酷暑的煎熬。 從寒冬走到了酷暑,半...
    Elsie91閱讀 252評論 0 0