本文重點介紹Linux deepin下開發hexo 搭配next、GiteePages,免費輕鬆實現高質量高顏值博客。其他系統的方法大同小異,只是環境配置略有不同,只要有git和npm環境便可輕鬆入門hexo。
最終效果: https://tczmh.gitee.io/hexodemo/
一、安裝
先安裝git npm依賴
sudo apt install git
sudo apt install npm
初始化
hexo init blog
cd blog
npm install
啓動
hexo server
打開瀏覽器訪問 http://localhost:4000
即可看到第一個hexo頁面
二、主題
換主題 ( 位置還是在blog文件夾內 Linux下默認位置是 /usr/lib/blog )
git clone https://github.com/iissnan/hexo-theme-next themes/next
配置文件
vim _config.yml
theme: landscape 改爲 theme: next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
部署 重啓
hexo g -d
hexo s
效果如圖
三、發文章
發表文章
hexo new post "初識hexo"
編輯文章
vim /usr/lib/blog/source/_posts/初識hexo.md
修改內容,語法爲markdown
(語法問題,所有的 ` 被我替換成了 . 使用的時候要替換回來)
---
title: test
date: 2019-01-17 09:27:29
tags: test
---
## start
----
**這是加粗的文字**
*這是傾斜的文字*`
***這是斜體加粗的文字***
~~這是加刪除線的文字~~
----
![blockchain](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/
u=702257389,1274025419&fm=27&gp=0.jpg "區塊鏈")
----
<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">簡書</a>
----
姓名|技能|排行
--|:--:|--:
劉備|哭|大哥
關羽|打|二哥
張飛|罵|三弟
----
...javascript
function clean(){
alert("已完成!");
}
...
----
...flow
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 確認?
st->op->cond
cond(yes)->e
cond(no)->op
...
----
##end
部署 重啓
hexo g -d
hexo s
效果如下
https://tczmh.gitee.io/hexodemo/2019/01/17/demo/
四、部署線上
避坑指南:用戶名之後會用來作爲二級域名
例子:
若 用戶名爲qiaofeng
那麼 就可以獲得一個免費的個人線上地址qiaofeng.gitee.io
若 新建項目的時候,項目名如果是blog
那麼 訪問地址就是https://qiaofeng.gitee.io/blog/
若項目名與用戶名相同也叫qiaofeng
那麼 可以直接訪問二級域名訪問 https://qiaofeng.gitee.io 而省略項目名
先註冊碼雲(https://gitee.com),新建項目
(截圖省略)
打開【服務】 - 【Gitee Pages】
勾選【強制使用 HTTPS】
點擊【啓動】
看到“已開啓 Gitee Pages 服務,網站地址: https://tczmh.gitee.io/hexodemo” 即可
回到本地,修改配置文件
vim _config.yml
中間修改
(這裏的url是剛纔開啓Gitee Pages 服務出現的url,root必須是gitee新建的項目名,如果最後出現讀不到js css,顯示混亂等問題,就是這一步不對)
url: https://tczmh.gitee.io/hexodemo
root: /hexodemo
結尾修改
deploy:
type: git
repo: https://gitee.com/tczmh/hexodemo.git
branch: master
其中repo填寫gitee上獲得的git地址,在【項目詳情】 - 【克隆/下載】 - 【複製】
安裝依賴
npm install hexo-deployer-git --save
設置全局git (若郵箱和用戶名不知道,可以在gitee的個人設置頁面查看)
git config --global user.email "你的郵箱"
git config --global user.name "你的用戶名"
清理&更新&部署一條龍命令 (可能需要輸入賬號密碼,就輸gitee登錄的即可)
hexo clean && hexo g && hexo d
看到以下內容說明成功
remote: Powered By Gitee.com
To https://gitee.com/tczmh/hexodemo.git
+ cfcc494...395648d HEAD -> master (forced update)
分支 'master' 設置爲跟蹤來自 'https://gitee.com/tczmh/hexodemo.git' 的遠程分支 'master'。
INFO Deploy done: git
訪問地址:https://tczmh.gitee.io/hexodemo
和本地測試的一樣
大功告成!
之後只需要修改本地配置文件
來配置博客,發表文章
更多功能訪問官方文檔
https://hexo.io/zh-cn/docs/
http://theme-next.iissnan.com/getting-started.html
補充一下
生成二維碼方法
(因爲開啓HTTPS 所以直接支持 微信掃一掃 微信長按二維碼識別等)
https://cli.im/[](https://cli.im/)
輸入【URL】
點擊【生成】即可
主要就是這些,都是一些基本入門的東西,深入研究可以說是其樂無窮。
本篇內容也可以查看我的個人博客:https://zzzmh.cn/single?id=54