域名+Hexo+gitHub的方式搭建博客却盘,其實本質(zhì)就是你的域名跟github服務(wù)器有個映射關(guān)系胡嘿,本地在Hexo上寫的.md格式的博文(其實讀取的時候是靜態(tài)網(wǎng)頁)push到github上后,通過訪問你的域名,就可以連接github的服務(wù)器猜拾,從而讀取你的博文。我搭建的過程佣盒,大致可以粗略分為以下步驟:
創(chuàng)建GitHub倉庫
本地環(huán)境搭建
配置域名
發(fā)表文章
創(chuàng)建GitHub倉庫
進入github官網(wǎng)挎袜,沒有賬號的,注冊一個咯 還能怎么辦呢
Create New repository
注意:格式必須為xxx.github.io
配置SSH(可以直接https肥惭,不需要配置SSH)
ssh-keygen
生成id_rsa.pub
文件盯仪,這里面就是SSH key的內(nèi)容
然后使用vim編輯器打開這個文件
vim ~/.ssh/id_rsa.pub
選中內(nèi)容 復制
在github的設(shè)置頁面,新增SSH Key
查看SSH是否配置好
ssh -T git@github.com
本地環(huán)境搭建(以Mac示例)
- 安裝git
- 安裝Node.js
- 安裝和配置Hexo
安裝git
安裝Node.js
一步步安裝就可以了蜜葱,我們會把博客內(nèi)容push到gitHub上全景,安裝Node.js因為Hexo基于Node.js
安裝和配置Hexo
Now,打開終端牵囤,用npm安裝Hexo(Mac自帶npm)
npm install -g hexo-cli
然后找個地方新建個文件夾爸黄,例如我建在用戶目錄下:
然后cd到Hexo文件夾
然后依次
hexo init
npm install
這一步如果出錯的話,可能與權(quán)限有關(guān)揭鳞,在前面加sudo 輸入密碼獲得權(quán)限就行
安裝結(jié)束后 空的文件夾現(xiàn)在長這樣:
然后啟動本地服務(wù) (hexo server)
hexo s
打開上網(wǎng)工具炕贵,輸入http://localhost:4000 是不是可以看到安裝成功?嚶嚶嚶
那么我們看到的網(wǎng)頁模板不是我們想要的野崇,所以可以換主題嘛称开!這里是采用了比較著名的https://github.com/litten/hexo-theme-yilia主題
Ctrl+c
cd themes
把yilia主題從github網(wǎng)站上clone下來
git clone https://github.com/litten/hexo-theme-yilia.git
可以把文件夾改名字為yilia
然后打開Hexo文件夾下面的_config.yml
文件,拉到最低乓梨,修改里面的theme
為yilia
ok 到這一步鳖轰,我們完成了主題的切換
那我們一開始新建的gitHub倉庫用來干什么的呢?別急扶镀,在下面
還是剛剛打開的_config.yml
文件蕴侣,拉到底,把配置改成下面這樣:
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/xxx/xxx.github.io.git
branch: master
注意看type: git 這里一定要寫git
而不是gitHub
好了狈惫,保存關(guān)閉
回到終端
執(zhí)行命令
hexo clean
hexo g
hexo d
如果出現(xiàn)ERROR Deployer not found: git
錯誤睛蛛,執(zhí)行npm install --save hexo-deployer-git
還是不行看一下上文中type是否是git
或者是否是權(quán)限問題鹦马,如果是胧谈,命令行前加sudo
配置域名
我是在阿里云買的域名(騰訊云,新浪云 etc.)
注意:記錄值寫一開始創(chuàng)建的github倉庫名:xxx.github.io
到這里荸频,完成了域名對github的映射
然后菱肖,去到github,完成github對域名的反映射
OK Nice旭从!到這里就正式完成了 輸入自己的域名稳强,看到了屬于自己獨一無二的博客场仲,是不是很驚喜?
發(fā)表文章
先說一下如果想在博文中插入圖片退疫,需要用到一個插件:
sudo npm install --save https://github.com/CodeFalling/hexo-asset-image
cd到Hexo 查看_config.yml
文件 查找 post_asset_folder
字段確定post_asset_folder
設(shè)置為true
新建文章
cd Hexo
hexo new "Hello World"
然后在Hexo/source/_ports/里面可以看到Hello World.md
和Hello World
文件夾,文件夾里可以放圖片等跟Hello World
博文有關(guān)的資源
在博文里用![] (/Hello World/tupian.png)
方式插入圖片
文章寫好直接執(zhí)行下面命令即可直接發(fā)布文章
hexo d -g
瀏覽器中輸入自己的域名,便可以查看最新的博文了薛躬!OverK祭汀!棒坏!
碎碎念
博文可直接用MarkDown編輯器編輯燕差,推薦Typora,真正的所寫即所得
yilia
主題相關(guān)的設(shè)置坝冕,可打開/Hexo/themes/yilia/_config.ylm
文件修改徒探,詳情可參照yilia
gitHub主頁
localhost:4000 端口被占用的話,可執(zhí)行 hexo s -p 5000 修改成5000 端口
end of the stream or a document separator is expected at line x, column y
查看是否是_config.yml
文件中x行冒號后面沒有空格
解決方法:npm i hexo-generator-json-content --save
(保證node在6.0版本以上)
如果出現(xiàn)
把層級改成下面這樣: