安裝hexo
我的小窩:https://zelsonia.coding.me/hexo/
- 準備:node.js(npm), git, coding賬號
npm install -g hexo
安裝hexo在本地sites下新建空文件夾來放置hexo
touch hexo
初始化
hexo init
本地打開查看是否運行成功
$ 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
安裝好后,在根目錄下的_config.yml配置文件修改
修改Hexo目錄下的config.yml配置文件中的theme屬性,將其設置為nexttheme:next
注意:Hexo有兩個config.yml文件,一個在根目錄,一個在theme下,此時修改的是在根目錄下的。清除緩存,重新生成,查看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
npm install hexo-deployer-git --save
安裝這個,要不之后會報錯error deployer not found:git上到coding
hexo clean
hexo d -g
如果報錯了,看看是不是之前提到過的報錯。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
- 首先確認
_config.yml
中有 post_asset_folder:true - hexo下執行
npm install https://github.com/CodeFalling/hexo-asset-image --save
- 之后新建的md會在
_posts
下出現同名文件夾,是放圖片的,之后
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