入門hexo ! 搭配next、GiteePages,輕鬆免費開發高質量我的博客 ( Linux Deepin )

本文重點介紹Linux deepin下開發hexo 搭配next、GiteePages,免費輕鬆實現高質量高顏值博客。其餘系統的方法大同小異,只是環境配置略有不一樣,只要有git和npm環境即可輕鬆入門hexo。javascript

最終效果: tczmh.gitee.io/hexodemo/css

1、安裝

先安裝git npm依賴html

sudo apt install git
sudo apt install npm
複製代碼

初始化java

hexo init blog
cd blog
npm install
複製代碼

啓動git

hexo server
複製代碼

打開瀏覽器訪問 http://localhost:4000 便可看到第一個hexo頁面github

hexo

2、主題

換主題 ( 位置仍是在blog文件夾內 Linux下默認位置是 /usr/lib/blog )shell

git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

配置文件npm

vim _config.yml
複製代碼

theme: landscape 改成 theme: nextvim

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
複製代碼

部署 重啓瀏覽器

hexo g -d
hexo s
複製代碼

效果如圖

next

3、發文章

發表文章

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
複製代碼

效果以下 tczmh.gitee.io/hexodemo/20…

markdown

4、部署線上

避坑指南:用戶名以後會用來做爲二級域名 例子: 若 用戶名爲qiaofeng 那麼 就能夠得到一個免費的我的線上地址qiaofeng.gitee.io 若 新建項目的時候,項目名若是是blog 那麼 訪問地址就是https://qiaofeng.gitee.io/blog/ 若項目名與用戶名相同也叫qiaofeng 那麼 能夠直接訪問二級域名訪問 qiaofeng.gitee.io 而省略項目名

先註冊碼雲(gitee.com),新建項目

4.jpg
(截圖省略) 打開【服務】 - 【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
複製代碼

訪問地址:tczmh.gitee.io/hexodemo

和本地測試的同樣

大功告成!

以後只須要修改本地配置文件 來配置博客,發表文章 更多功能訪問官方文檔 hexo.io/zh-cn/docs/ theme-next.iissnan.com/getting-sta…

補充一下

生成二維碼方法 (由於開啓HTTPS 因此直接支持 微信掃一掃 微信長按二維碼識別等) cli.im/ 輸入【URL】 點擊【生成】便可

cli.im

主要就是這些,都是一些基本入門的東西,深刻研究能夠說是其樂無窮。 本篇內容也能夠查看個人我的博客:zzzmh.cn/single?id=5…

相關文章
相關標籤/搜索