入門hexo ! 搭配next、GiteePages，輕松免費(fèi)開(kāi)發(fā)高質(zhì)量個(gè)人博客 ( Linux D

raoyi 發(fā)布于2019-08-23 14:47 / 1167人閱讀

摘要：本文重點(diǎn)介紹下開(kāi)發(fā)搭配，免費(fèi)輕松實(shí)現(xiàn)高質(zhì)量高顏值博客。其他系統(tǒng)的方法大同小異，只是環(huán)境配置略有不同，只要有和環(huán)境便可輕松入門。本篇內(nèi)容也可以查看我的個(gè)人博客

本文重點(diǎn)介紹Linux deepin下開(kāi)發(fā)hexo 搭配next、GiteePages，免費(fèi)輕松實(shí)現(xiàn)高質(zhì)量高顏值博客。其他系統(tǒng)的方法大同小異，只是環(huán)境配置略有不同，只要有g(shù)it和npm環(huán)境便可輕松入門hexo。

最終效果:?https://tczmh.gitee.io/hexodemo/

一、安裝

先安裝git npm依賴

sudo apt install git
sudo apt install npm

初始化

hexo init blog
cd blog
npm install

啟動(dòng)

hexo server

打開(kāi)瀏覽器訪問(wèn)??http://localhost:4000?
即可看到第一個(gè)hexo頁(yè)面

二、主題

換主題 ( 位置還是在blog文件夾內(nèi) Linux下默認(rèn)位置是 /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

效果如圖

三、發(fā)文章

發(fā)表文章

hexo new post "初識(shí)hexo"

編輯文章

vim /usr/lib/blog/source/_posts/初識(shí)hexo.md

修改內(nèi)容，語(yǔ)法為markdown
(語(yǔ)法問(wèn)題，所有的 ` 被我替換成了 . 使用的時(shí)候要替換回來(lái))

---
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 "區(qū)塊鏈")
----
簡(jiǎn)書
----
姓名|技能|排行
--|:--:|--:
劉備|哭|大哥
關(guān)羽|打|二哥
張飛|罵|三弟
----
...javascript
    function clean(){
         alert("已完成!");
    }
...
----
...flow
st=>start: 開(kāi)始
e=>end: 結(jié)束
op=>operation: 我的操作
cond=>condition: 確認(rèn)？
st->op->cond
cond(yes)->e
cond(no)->op
...
----
##end

部署重啟

hexo g -d
hexo s

效果如下
https://tczmh.gitee.io/hexodemo/2019/01/17/demo/

四、部署線上

避坑指南：用戶名之后會(huì)用來(lái)作為二級(jí)域名
例子:
若用戶名為qiaofeng
那么就可以獲得一個(gè)免費(fèi)的個(gè)人線上地址qiaofeng.gitee.io
若新建項(xiàng)目的時(shí)候，項(xiàng)目名如果是blog
那么訪問(wèn)地址就是https://qiaofeng.gitee.io/blog/
若項(xiàng)目名與用戶名相同也叫qiaofeng
那么可以直接訪問(wèn)二級(jí)域名訪問(wèn) https://qiaofeng.gitee.io 而省略項(xiàng)目名

先注冊(cè)碼云(https://gitee.com)，新建項(xiàng)目

(截圖省略)
打開(kāi)【服務(wù)】 - 【Gitee Pages】
勾選【強(qiáng)制使用 HTTPS】
點(diǎn)擊【啟動(dòng)】
看到“已開(kāi)啟 Gitee Pages 服務(wù)，網(wǎng)站地址：??https://tczmh.gitee.io/hexodemo?” 即可

回到本地，修改配置文件

vim _config.yml

中間修改

(這里的url是剛才開(kāi)啟Gitee Pages 服務(wù)出現(xiàn)的url，root必須是gitee新建的項(xiàng)目名，如果最后出現(xiàn)讀不到j(luò)s css，顯示混亂等問(wèn)題，就是這一步不對(duì))

url: https://tczmh.gitee.io/hexodemo
root: /hexodemo

結(jié)尾修改

deploy:
  type: git
  repo: https://gitee.com/tczmh/hexodemo.git
  branch: master

其中repo填寫gitee上獲得的git地址，在【項(xiàng)目詳情】 - 【克隆/下載】 - 【復(fù)制】

安裝依賴

npm install hexo-deployer-git --save

設(shè)置全局git (若郵箱和用戶名不知道，可以在gitee的個(gè)人設(shè)置頁(yè)面查看)

git config --global user.email "你的郵箱"
git config --global user.name "你的用戶名"

清理&更新&部署一條龍命令 (可能需要輸入賬號(hào)密碼，就輸gitee登錄的即可)

hexo clean && hexo g && hexo d

看到以下內(nèi)容說(shuō)明成功

remote: Powered By Gitee.com        
To https://gitee.com/tczmh/hexodemo.git
 + cfcc494...395648d HEAD -> master (forced update)
分支 "master" 設(shè)置為跟蹤來(lái)自 "https://gitee.com/tczmh/hexodemo.git" 的遠(yuǎn)程分支 "master"。
INFO  Deploy done: git

訪問(wèn)地址：https://tczmh.gitee.io/hexodemo?

和本地測(cè)試的一樣

大功告成！

之后只需要修改本地配置文件
來(lái)配置博客，發(fā)表文章
更多功能訪問(wèn)官方文檔
https://hexo.io/zh-cn/docs/
http://theme-next.iissnan.com/getting-started.html

補(bǔ)充一下

生成二維碼方法
(因?yàn)殚_(kāi)啟HTTPS 所以直接支持微信掃一掃微信長(zhǎng)按二維碼識(shí)別等)
https://cli.im/[](https://cli.im/)
輸入【URL】
點(diǎn)擊【生成】即可

主要就是這些，都是一些基本入門的東西，深入研究可以說(shuō)是其樂(lè)無(wú)窮。
本篇內(nèi)容也可以查看我的個(gè)人博客:https://zzzmh.cn/single?id=54