2020.11.04 該文章已被盜
http://www.manongjc.com/detail/20-sxlzxxrkavxbkxq.html
成品效果
前言
最近發現wordpress不能很好的同時支持markdown和Latex數學公式,國內的服務器又在備案,於是就選擇了支持原生Markdown的Hexo博客系統,況且雲服務器費用也是一筆不小的開支(錢都用來填飽肚子了qwq)
但碼雲不支持使用自己的域名就很難受(下篇會將博客部署到服務器,這樣就可以使用自定義域名了)
其實就是閑的蛋疼想找點事做
無論干什么也一定要看官方文檔啊(血淚教訓)
安裝運行環境
(個人搭建時使用的win10系統) 關於安裝運行環境,官方文檔上有針對不同系統的詳細說明,不再贅述
如果是第一次接觸到Git 可以看一下 菜鳥驛站的Git簡明指南
建站
參考官方文檔
安裝(不貼安裝命令是因為安裝命令可能隨時更換,但官方文檔必定是最准確的)
使用命令行進入安裝目錄的上一級目錄,新建一個空文件夾
接下來執行
hexo init <folder>
cd <folder>
npm install
來進行網站的初始化,其中 "
對於這種警告
可以完全忽略,因為這是Node.js在mac系統上的bug(有興趣可以自行百度)
這樣你的網站就建好了(霧),來訪問一下看看吧:
執行命令
hexo clean //清除緩存與靜態文件
hexo generate //生成靜態文件,可簡寫為 hexo g
hexo server //啟動本地網站服務器,可簡寫為 hexo s
通過命令行的反饋可以看到,本地網站網址為
http://localhost:4000
讓我們進去看看吧
是這個樣子:
看完后按 Ctrl+C 退出
詳細的hexo的命令請參考官方文檔
部署
只在本地看怎末能行?搭建網站就是為了讓更多人看到內容
下面開始將網站部署在 Gitee
(為什么是Gitee? 因為Gitee在國內訪問比Github快)
創建倉庫
登錄碼雲(沒有賬號的自己注冊去!),新建一個倉庫,將他命名為你網站的名字(很重要!,命名不同會很麻煩)
在 倉庫頁-服務-Gitee Pages (需要綁定手機)
中打開Gitee Pages 服務
部署分支建議選擇master,部署目錄是整個倉庫
創建SSH
什么是SSH?簡單說就是對遠程登錄會話和其他網絡服務提供安全性的協議,Git的 remote操作需要使用SSH密鑰
下面創建一個ssh密鑰對
打開Git Bash(在開始菜單有) 鍵入
ssh-keygen -t rsa -C “your_email@example.com”
郵箱為你注冊碼雲的郵箱
其中會讓你確認和輸入密碼,密碼可不填(直接按回車)
創建完的ssh公鑰對會在 用戶/.ssh/文件夾中
將/.ssh 文件夾中的 "xxx.pub"文件打開,里面的內容就是ssh公鑰了
打開 碼雲個人主頁-個人設置-安全設置-ssh公鑰里將公鑰填上,名字可以隨便取
如果沒有看懂,可以看碼雲-SSH公鑰詳細的圖文教程
因為Git是分布式版本控制系統，所以每個機器都必須自報家門：你的名字和Email地址（都不會進行驗證），這樣遠程倉庫才知道哪次提交是由誰完成的。所以接着設定git用戶名和郵箱
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
建議填你注冊碼雲的用戶名和郵箱
接下來這一步卡了我蠻長時間的
部署到倉庫
首先安裝一鍵部署插件
npm install hexo-deployer-git --save
打開hexo博客目錄中的 _config.yml 文件
找到 deploy: 並增加
deploy:
type: git
repo: 你博客的git地址
branch: master
"你博客的git地址" 可在倉庫頁
中復制
更多部署參數可在官方文檔查看
然后修改默認路徑,在 _config.yml 文件修改 url , root:
url: 倉庫地址
root: / 倉庫的名字/
這樣就可以推送博客辣~
執行命令
hexo clean
hexo g
hexo depoly //部署到網絡,可簡寫為hexo d
接下來更新Gitee Pages 服務,訪問Gitee Pages的網站地址
成功部署到了雲端
提示
由於時靜態頁面,在調試時,一定要及時清理瀏覽器緩存和更新Gitee Pages
或使用瀏覽器的Devtools禁用該網站的緩存進行網站實時更新
如果網站格式丟失
如果部署到雲端是網站格式丟失但本地部署無問題
在網頁中打開調試模式 (F12) 發現報了很多錯
原來是找不到 js和css 文件,無法渲染網頁
重新修改 url, root
注意 root 一定要是倉庫的名字
倉庫介紹與開源聲明
當你回到碼雲倉庫頁的時候, 我的項目介紹呢? 我的開源許可證呢?
原來是hexo部署會把整個倉庫(的分支)清空,所以 README.md 和 LICENSE被刪掉了
我們應該將 README.md 和 LICENSE 放到網站目錄的 /soucre 目錄下
但是,眾所周知:Hexo頁面和文章使用MarkDown語言撰寫,當執行
hexo g
命令時,Markdown頁面會被"編譯"成使用HTML語言的標准網頁(標准說法是:生成靜態網頁)
但碼雲只認README.md,我們可以通過對網站文件夾中的 _config.yml 進行修改
將 skip_render: 選項后加入 README.md 來跳過對 README.md 的"編譯"
問題解決了
網站信息自定義
如何讓這個網站看起來像你自己的?
首先要更改網站的信息,包括
- 網站主/副標題
- 網站介紹
可在網站目錄下的_config.yml 文件中 site 欄修改
使用
寫作其實很簡單,你可以使用官方文檔
也可以在source/_posts/下直接新建一個markdown文件,只不過文章的Front-matter需要你自己添加
Front-matter
Front-matter就是一個可以指定文章詳細內容的標簽
常用的有:
- title 文章標題
- date 文章創建日期
- tags 文章標簽
- categories 文章分類
比如本篇文章的Front-matter
---
title: 使用Hexo搭建博客(上)-建站,配置與部署
date: 2020-09-09 21:16:33
categories: 網站建設
tags:
- 網站
- 博客
- 教程
---
結尾
- 不想看Hexo的默認主題?
- 在網站中加入評論區?
- 在網站中加入炫酷特效?
- 好康的看板娘?
- 不想使用又長又臭的碼雲提供的域名?