本文來自 悟塵紀,獲取更新內容可查看原文: https://www.lixl.cn/2019/0310...
對於有必定技術背景的同窗,本身動手搭建博客網站是一個很不錯的選擇。選擇喜歡的主題,按需進行個性化配置,隨時在本地用本身喜歡的工具寫文章,一鍵發佈到多個博客託管平臺,使用本身喜歡的圖牀/CDN 來加速...javascript
演示站點(悟塵紀) 基於 Hexo 的 hexo-theme-matery 主題構建,部署在騰訊雲 COS 中並使用 CDN 進行內容加速,經過 PicGo + 阿里雲 OSS 做爲圖牀進行靜態資源加速。
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其餘渲染引擎)解析文章,在幾秒內,便可利用靚麗的主題生成靜態網頁。css
安裝 Hexo 至關簡單,只須要先安裝下列應用程序便可:html
全部必備的應用程序安裝完成後,便可使用 npm 安裝 Hexo。前端
npm install -g hexo-cli
安裝之後,可使用如下兩種方式執行 Hexo:java
npx hexo
node_modules
添加到環境變量之中便可直接使用: hexo
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
後期須要升級的化,進入 blog 目錄,先檢查更新:node
$ npm outdated Package Current Wanted Latest Location hexo 3.9.0 3.9.0 4.2.0 hexo-site hexo-deployer-git 1.0.0 1.0.0 2.1.0 hexo-site hexo-generator-archive 0.1.5 0.1.5 1.0.0 hexo-site hexo-generator-category 0.1.3 0.1.3 1.0.0 hexo-site hexo-generator-feed 1.2.2 1.2.2 2.2.0 hexo-site hexo-generator-index 0.2.1 0.2.1 1.0.0 hexo-site hexo-generator-tag 0.2.0 0.2.0 1.0.0 hexo-site hexo-renderer-ejs 0.3.1 0.3.1 1.0.0 hexo-site hexo-renderer-marked 0.3.2 0.3.2 2.0.0 hexo-site hexo-renderer-stylus 0.3.3 0.3.3 1.1.0 hexo-site hexo-server 0.3.3 0.3.3 1.0.0 hexo-site
修改 package.json
文件,基於 Latest
列內容更新版本號,而後更新並檢查版本號:git
$ npm install --save # 檢查版本號 $ hexo -v hexo: 4.2.0 hexo-cli: 3.1.0 ......
安裝 Hexo 完成後,請執行下列命令,Hexo 將會在指定文件夾中新建所須要的文件。github
hexo init <folder> cd <folder> npm install
此時,經過 hexo s
命令便可在本地啓動您的博客站點了。web
$ hexo s INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
接下來將安裝主題,配置博客託管平臺,實現一鍵發佈並刷新 CDN 緩存。算法
在執行過Hexo deploy
命令以後,目錄結構新增了.deploy_git
,public
,.gitignore
,以下:
$ tree -L 2 . ├── .deploy_git ├── node_modules ├── public ├── scaffolds │ ├── draft.md │ ├── page.md │ └── post.md ├── source │ ├── _posts │ ├── _drafts ├── themes ├── _config.yml ├── db.json ├── package.json └── package-lock.json
用來配置博客相關的參數,初始化時自動建立。具體參數設置,可參照 Hexo 配置 文檔。
都是在初始化時自動建立。
node_modules
用來存儲已安裝的各種依賴包。package.json
用來查看 Hexo 的版本以及相關依賴包的版本。
Hexo 會默認安裝:
新安裝的依賴包,也會保存在node_module
文件夾下。
模板文件夾,初始化時自動建立。包含page
,post
,draft
三種模板,分別對應 頁面、要發佈的文章、草稿。
主題文件夾,初始化時自動建立。每個主題,都有一個單獨的文件夾。默認主題爲 landscape。
這三者的關係大體是:source -> public -> .deploy_git
執行hexo generate
,根據 source,更新 public。
執行hexo deploy
,根據 public,更新 .deploy_git。
hexo-theme-matery 是一個採用 Material Design
和響應式設計的 Hexo 博客主題,點擊 這裏 能夠查看示例效果。點擊 這裏 下載 master
分支的最新穩定版的代碼,解壓縮後,將 hexo-theme-matery
的文件夾複製到 Hexo 的 themes
文件夾中便可。
修改 Hexo 根目錄下的 _config.yml
的 theme
的值:theme: hexo-theme-matery
_config.yml
文件的其它修改建議_config.yml
的 url
的值爲你的網站主 URL
(如:http://xxx.github.io
)。per_page
的分頁條數值爲 6
的倍數,如:12
、18
等,這樣文章列表在各個屏幕下都能較好的顯示。language
的值爲 zh-CN
。categories
頁是用來展現全部分類的頁面,若是 source
目錄下尚未 categories/index.md
文件,那麼就須要新建一個,命令以下:
hexo new page "categories"
編輯你剛剛新建的頁面文件 /source/categories/index.md
,至少須要如下內容:
--- title: categories date: 2018-09-30 17:25:30 type: "categories" layout: "categories" ---
tags
頁是用來展現全部標籤的頁面,若是 source
目錄下尚未 tags/index.md
文件,那麼就須要新建一個,命令以下:
hexo new page "tags"
編輯剛剛新建的頁面文件 /source/tags/index.md
,至少須要如下內容:
--- title: tags date: 2018-09-30 18:23:38 type: "tags" layout: "tags" ---
about
頁是用來展現關於我和個人博客信息的頁面,若是 source
目錄下尚未 about/index.md
文件,那麼就須要新建一個,命令以下:
hexo new page "about"
編輯剛剛新建的頁面文件 /source/about/index.md
,至少須要如下內容:
--- title: about date: 2018-09-30 17:25:30 type: "about" layout: "about" ---
friends
頁是用來展現友情鏈接信息的頁面,若是 source
目錄下尚未 friends/index.md
文件,那麼就須要新建一個,命令以下:
hexo new page "friends"
編輯剛剛新建的頁面文件 /source/friends/index.md
,至少須要如下內容:
--- title: friends date: 2018-12-12 21:25:30 type: "friends" layout: "friends" ---
同時,在 source
目錄下新建 _data
目錄,在 _data
目錄中新建 friends.json
文件,文件內容以下所示:
[ { "avatar": "https://www.lixl.cn/medias/avatar.jpg", "name": "悟塵記", "introduction": "人生就是一場修行,上善若水,厚德載物。", "url": "https://www.lixl.cn/", "title": "前去參觀" }, { "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2", "name": "Fabric", "introduction": "A Blockchain Platform for the Enterprise", "url": "https://hyperledger-fabric.readthedocs.io/en/master/", "title": "前去學習" }, { "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg", "name": "BootCDN", "introduction": "穩定、快速、免費的前端開源項目 CDN 加速服務。", "url": "https://www.bootcdn.cn/", "title": "前去加速" } ]
因爲 Hexo 自帶的代碼高亮主題顯示很差看,因此主題中使用到了 hexo-prism-plugin 的 Hexo 插件來作代碼高亮,安裝命令以下:
npm i -S hexo-prism-plugin
而後,修改 Hexo 根目錄下 _config.yml
文件中 highlight.enable
的值爲 false
,並新增 prism
插件相關的配置,主要配置以下:
highlight: enable: false prism_plugin: mode: "preprocess" # realtime/preprocess theme: "tomorrow" line_number: false # default false custom_css:
本主題中還使用到了 hexo-generator-search 的 Hexo 插件來作內容搜索,安裝命令以下:
npm install hexo-generator-search --save
在 Hexo 根目錄下的 _config.yml
文件中,新增如下的配置項:
search: path: search.xml field: post
頁腳信息可能須要作定製化修改,並且它不便於作成配置信息,因此可能須要你本身去再修改和加工。修改的地方在主題文件的 /layout/_partial/footer.ejs
文件中,包括站點、使用的主題、訪問量等。
在主題的 _config.yml
文件中,默認支持 QQ
、GitHub
和郵箱的配置,能夠在主題文件的 /layout/_partial/social-link.ejs
文件中,新增、修改須要的社交連接地址,增長連接可參考以下代碼:
<a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="訪問個人GitHub" data-position="top" data-delay="50" > <i class="fa fa-github"></i> </a>
其中,社交圖標(如:fa-github
)能夠在 Font Awesome 中搜索找到。如下是經常使用社交圖標的標識,供參考:
fa-facebook
fa-twitter
fa-google-plus
fa-linkedin
fa-tumblr
fa-medium
fa-slack
fa-weibo
fa-wechat
fa-qq
在主題文件的 source/medias/reward
文件中,能夠替換成你的的微信和支付寶的打賞二維碼圖片。
經過 hexo-deployer-git 插件能夠實現一鍵將博客同時部署到多個 git 倉庫中。如同時發佈到 github 及 gitee 提供的 pages 服務。安裝:
npm install hexo-deployer-git --save
修改 Hexo 根目錄下的 _config.yml
文件中的以下內容:
## Docs: https://hexo.io/docs/deployment.html deploy: - type: git repo: https://github.com/lxl80/blog.git branch: gh-pages ignore_hidden: false - type: git repo: https://gitee.com/lxl80/lxl80.git branch: master ignore_hidden: false
也能夠如本站同樣,採用 hexo-deployer-cos-enhanced 插件將靜態內容部署到騰訊雲對象存儲服務中,在 DNS 配置中將境內線路解析到騰訊雲 CDN 地址,實現加速。部署完成後會自動刷新被更新文件的 CDN 緩存。
安裝:
npm install hexo-deployer-cos-enhanced --save
_config.yml
配置以下:
deploy: - type: git repo: https://github.com/lxl80/blog.git branch: gh-pages ignore_hidden: false - type: cos bucket: lxl80-130**** region: ap-beijing secretId: AKIDh9****F8FvL secretKey: Z3IGiur****QZR3PgjXmlVg cdnConfig: enable: true cdnUrl: https://static.lixl.cn bucket: static-130**** region: ap-beijing folder: static secretId: AKIDh9****F8FvL secretKey: Z3IGiur****QZR3PgjXmlVg
而後經過 hexo g -d
便可實現一鍵發佈,並更新 CDN 緩存。
若是文章名稱是中文的,那麼 Hexo 默認生成的永久連接也會有中文,這樣不利於 SEO
,且 gitment
評論對中文連接也不支持。咱們能夠用 hexo-permalink-pinyin Hexo 插件生成文章時生成中文拼音的永久連接,或者用hexo-abbrlink 生成靜態文章連接。如下結合 hexo-abbrlink 生成相似 /yyyy/mmdd+隨機數.html
的文章連接地址。
安裝命令以下:
npm install hexo-abbrlink --save
在 Hexo 根目錄下的 _config.yml
文件中,修改 permalink:
,並在文件末尾新增 abbrlink:
配置項:
permalink: :year/:month:day:abbrlink.html abbrlink: alg: crc16 #算法選項:crc16丨crc32 rep: dec #輸出進制:dec爲十進制,hex爲十六進制
放在 Github 的資源在國內加載速度比較慢,所以須要使用 CDN 加速來優化網站打開速度,jsDelivr + Github 即是免費且好用的 CDN,很是適合博客網站使用。也能夠選擇主流雲服務商提供的對象存儲+CDN 來得到更快速及穩定的訪問效果,費用低到幾乎可忽略。
用法:
https://cdn.jsdelivr.net/gh/你的用戶名/你的倉庫名@發佈的版本號/文件路徑
例如:
https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg
注意:版本號不是必需的,是爲了區分新舊資源,若是不使用版本號,將會直接引用最新資源。
還能夠配合 PicGo圖牀上傳工具的 自定義域名前綴來上傳圖片,使用極其方便。具體使用方法可參見個人另外一篇文章: 使用 Typora+iPic/PicGo 圖牀+CDN 實現高效 Markdown 創做
若是你想要在文章中顯示文章字數、閱讀時長信息,能夠安裝 hexo-wordcount插件。
安裝命令以下:
npm i --save hexo-wordcount
而後只需在本主題下的 _config.yml
文件中,激活如下配置項便可:
wordCount: enable: false # 將這個值設置爲 true 便可. postWordCount: true min2read: true totalCount: true
本主題中還使用到了 hexo-generator-feed 的 Hexo 插件來作 RSS
,安裝命令以下:
npm install hexo-generator-feed --save
在 Hexo 根目錄下的 _config.yml
文件中,新增如下的配置項:
feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: " " order_by: -date
執行 hexo clean && hexo g
從新生成博客文件,而後在 public
文件夾中便可看到 atom.xml
文件,說明已經安裝成功了。
在本主題的 _config.yml
中能夠修改部分自定義信息,有如下幾個部分:
favicon
和 Logo
Gitalk
、Gitment
、Valine
和 disqus
評論配置Google Analytics
)hashcode
值取餘,來選擇展現對應的特點圖若是本主題中的諸多功能和主題色彩你不滿意,能夠在主題中自定義修改,不少更自由的功能和細節點的修改難以在主題的 _config.yml
中完成,須要修改源代碼纔來完成。如下列出了可能有用的地方:
在主題文件的 /source/css/matery.css
文件中,搜索 .bg-color
來修改背景顏色:
/* 總體背景顏色,包括導航、移動端的導航、頁尾、標籤頁等的背景顏色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } @-webkit-keyframes rainbow { /* 動態切換背景顏色. */ } @keyframes rainbow { /* 動態切換背景顏色. */ }
能夠直接在 /source/medias/banner
文件夾中更換喜歡的 banner
圖片,主題代碼中是天天動態切換一張,只需 7
張便可。若是會 JavaScript
代碼,能夠修改爲本身喜歡切換邏輯,如:隨機切換等,banner
切換的代碼位置在 /layout/_partial/bg-cover-content.ejs
文件的 <script></script>
代碼中:
$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");
在 /source/medias/featureimages
文件夾中默認有 24 張特點圖片,你能夠再增長或者減小,並須要在 _config.yml
作同步修改。
Front-matter
選項中的全部內容均爲非必填的。但仍然建議至少填寫 title
和 date
的值。
配置選項 | 默認值 | 描述 |
---|---|---|
title | Markdown 的文件標題 |
文章標題 |
date | 文件建立時的日期時間 | 發佈時間,應保證全局惟一 |
author | 根 _config.yml 中的 author |
文章做者 |
img | featureImages 中的某個值 |
文章特徵圖 |
top | true |
文章是否置頂,值爲 true ,則會做爲首頁推薦文章 |
cover | false |
是否須要加入到首頁輪播封面中 |
coverImg | 無 | 該文章在首頁輪播封面須要顯示的圖片路徑,若是沒有,則默認使用文章的特點圖片 |
password | 無 | 文章閱讀密碼,該值必須是用 SHA256 加密後的密碼,防止被他人識破。 |
toc | true |
是否開啓 TOC,能夠針對某篇文章單獨關閉 TOC 的功能。 |
mathjax | false |
是否開啓數學公式支持 |
summary | 無 | 文章卡片摘要顯示的文字,若是無值程序會自動截取文章的部份內容做爲摘要 |
categories | 無 | 文章分類,建議一篇文章一個分類 |
tags | 無 | 文章標籤,一篇文章能夠多個標籤 |
注意:
如下爲文章的 Front-matter
示例。
--- title: 基於Hexo的hexo-theme-matery主題搭建博客並優化 date: 2019-10-03 14:25:00 ---
--- title: 基於Hexo的hexo-theme-matery主題搭建博客並優化 date: 2019-10-03 14:25:00 author: 悟塵 img: /source/images/xxx.jpg top: true cover: true coverImg: /images/1.jpg password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 toc: false mathjax: false summary: 這是你自定義的文章摘要內容,若是這個屬性有值,文章卡片摘要就顯示這段文字,不然程序會自動截取文章的部份內容做爲摘要 categories: 工具 tags: - blog - hexo ---
搜索引擎優化,又稱爲 SEO,即 Search Engine Optimization,它是一種經過分析搜索引擎的排名規律,瞭解各類搜索引擎怎樣進行搜索、怎樣抓取互聯網頁面、怎樣肯定特定關鍵詞的搜索結果排名的技術。Google 自動收錄效果還不錯,百度就差得遠了(GitHub
不容許百度的Spider
爬取GitHub
上的內容)。
安裝 sitemap 插件生成站點地圖文件:
npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save #百度專用
安裝後直接執行 hexo cl&&hexo g -d
命令,就會在網站根目錄生成 sitemap.xml
及 baidusitemap.xml
文件。
登陸百度搜索資源平臺, 登陸成功以後在 用戶中心 --> 站點管理 頁面中點擊添加網站,按提示操做。
提示:因爲百度的 spider 是爬取不到 GitHub 的內容的,因此在第三步驗證網站的時候,建議選擇
CNAME驗證
的方式。
通過以上步驟,百度已經知道有咱們網站的存在了,可是百度還不知道咱們的網站上有什麼內容,因此要向百度推送咱們的內容。點擊 網站支持 --> 數據引入 --> 連接提交菜單,提交站點地圖:
另外,hexo-theme-matery
主題已經內置了 自動推送
的功能, 檢查 themes/hexo-theme-matery/_config.yml
文件中以下配置:
# 百度搜索資源平臺提交連接 baiduPush: true
自動推送的 JS 代碼部署在站點的每個頁面源代碼中,當頁面在每次被瀏覽時,連接就會被自動推送給百度。
登陸 Google Search Console,點擊添加資源,輸入本身的域名,按提示操做。
提示:須要進行 DNS 驗證,進入 DNS 域名解析設置頁面,按提示增長 TXT 記錄,以下圖:
驗證成功後,須要提交站點地圖。參照下圖提交,而後等待收錄。
注意:hexo 配置文件中的 url 必定要輸入正確的域名,插件是根據 url 生成站點地圖的。
hexo server
#啓動本地服務器,用於預覽主題。Hexo 會監視文件變更並自動更新,除修改站點配置文件外,無須重啓服務器,直接刷新網頁便可生效。
hexo server -s
#以靜態模式啓動
hexo server -p 5000
#更改訪問端口 (默認端口爲 4000,'ctrl + c'關閉 server)
hexo server -i IP地址
#自定義 IP
hexo clean
#清除緩存 ,網頁正常狀況下能夠忽略此條命令,執行該指令後,會刪掉站點根目錄下的 public 文件夾
hexo g
#生成靜態網頁 (執行 $ hexo g
後會在站點根目錄下生成 public 文件夾, hexo 會將"/blog/source/" 下面的.md 後綴的文件編譯爲.html 後綴的文件,存放在"/blog/public/ " 路徑下)
hexo d
#自動生成網站靜態文件,並將本地數據部署到設定的倉庫(如 github)
hexo init
文件夾名稱 #初始化 XX 文件夾名稱
npm update hexo -g
#升級
npm install hexo -g
#安裝
node-v
#查看 node.js 版本號
npm -v
#查看 npm 版本號
git --version
#查看 git 版本號
hexo -v
#查看 hexo 版本號
hexo n "個人第一篇文章"
等價於 hexo new "個人第一篇文章"
還等價於 hexo new post "個人第一篇文章"
hexo p
等價於 hexo publish
hexo g
等價於 hexo generate
hexo s
等價於 hexo server
hexo d
等價於 hexo deploy
hexo g -d
等價於hexo generate --deploy
注: hexo clean
沒有 簡寫, git --version
沒有簡寫
1. 經過hexo g -d
部署時報Error: Spawn failed
錯誤:
這是因爲 git 本地記錄的提交版本號與 github 上不一致致使的,經過
git reset --hard commitCode
便可解決。
280a7fdd46fcfd7d34e652aec15523dcd247fac8
cd .deploy_git cat .git/logs/HEAD
https://github.com/用戶名/倉庫名/commits/分支名
,如https://github.com/lxl80/blog/commits/gh-pages
git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交標識