準備環(huán)境
- 安裝 Node
- 安裝 Git
- 注冊碼云或者github
- 安裝 Hexo
npm install hexo-cli -g
- 出現(xiàn)下圖表示安裝成功
搭建本地個人博客
初始化 hexo
- 新建一個空白文件夾（下文提到的“項目根目錄”是指你新建的文件夾的位置）用于存放 hexo 資源。在空白文件夾里面打開 Git Bash 瓷叫，輸入下列命令行進行初始化忘分，初始化成功后會在文件夾生成如下圖的文件辣吃。
hexo init
生成靜態(tài)頁面
hexo g
啟動本地服務
hexo s
- 關閉本地服務器在 Git Bash 界面按 Ctrl+C触徐， 在瀏覽器輸入：http://localhost:4000 查看
美化個人博客
博客主題設置
克隆主題
- 在項目根目錄下的 themes 文件中涩僻，打開 Git Bash 皿伺，用命令行克隆下新的主題员辩。我這里用的 Next 主題，需要其他主題的自己百度找鸵鸥。
git clone https://github.com/theme-next/hexo-theme-next.git
配置主題
- 用文本的方式打開項目根目錄下的 _config.yml 配置文件奠滑，找到 theme 把原來默認的 landscape 主題名字，改成剛剛克隆的主題名字（主題名字為上圖中文件夾的名字）妒穴。
測試主題
- 重新回到項目根目錄下宋税，打開 Git Bath ，用命令行啟動服務器讼油。在瀏覽器訪問 http://localhost:4000
發(fā)布文章
- 方法一：在項目根目錄下杰赛，打開 Git Bash ，執(zhí)行新建命令矮台，然后 hexo 會自動在指定目錄下生成對應文件乏屯，如下圖所示。然后找到新建好的文件瘦赫，打開即可進行編輯瓶珊。
hexo new "此處輸入文章名字"
- 方法二：可以直接把已經(jīng)準備的 md 格式的文章復制到 項目名稱 /source/_posts 目錄下，然后打開文件耸彪，在文件頭加入 front-matter 部分伞芹，title 表示文章標題，date 表示發(fā)布時間蝉娜。如圖所示唱较，圖片上用到的其他參數(shù)，后面會介紹到召川。
front-matte 書寫的時候要注意南缓，冒號后面要跟一個空格號
---
title: a
date: 2019-04-14 23:10:17
---
- 準備好 md 格式文件后，使用下面命令生成網(wǎng)站靜態(tài)文件到默認設置的 public 文件夾荧呐，然后再啟動本地服務器汉形。
hexo g
主題風格設置
-
打開主題文件夾下的 _config.yml 配置文件（注意：這里要區(qū)別，不是項目根目錄倍阐，主題文件夾的路徑為：新建空白文件夾名稱/themes/主題文件夾名稱）概疆。通過查找功能找到 Schemes 模塊，修改為 Gemini 風格峰搪。如果喜歡其他風格可以自己修改岔冀。如下圖所示：
image -
刷新頁面可以看到新風格的界面如下圖所示：
image
博客左側欄設置
- 在上面的網(wǎng)站界面，可以發(fā)現(xiàn)網(wǎng)站的文字是英文概耻，只要修改一下語言模式即可使套。打開根目錄文件夾下的 _config.yml 配置文件罐呼。找到 language，設置為 zh-CN侦高。標題等其他參數(shù)的設置如下嫉柴。可以對照效果圖的具體位置奉呛，根據(jù)自己的實際需求進行修改差凹。（注意：修改了項目根目錄下的 _config.yml配置文件，需要重啟部署項目后才能生效）
分類設置
添加分類列表
- 在項目根目錄下侧馅，執(zhí)行下面的命令行危尿，新建分類頁面，然后會在項目根目錄下的 source 文件夾中新建一個 categories 文件夾馁痴。
hexo new page categories
- 打開 categories 文件夾中的 index.md 文件谊娇，添加 type 字段，設置為 “categories”罗晕。如下圖所示济欢。
- 接著到主題文件夾下的 _config.yml 配置文件下，找到 menu 模塊小渊，把 categories 的注釋給去掉法褥。如下圖所示。
- 刷新頁面（如果刷新沒效果酬屉，可以重啟服務）半等，可以在頁面左側欄上看到多了一個“分類”列表。
如何將文章添加到對應分類呐萨？
-
文章發(fā)布前杀饵，在 front-matter 部分，多寫一個 categories 字段谬擦，然后參數(shù)寫上類別的名稱切距，保存后重啟服務，在網(wǎng)頁上點擊“分類”惨远，可以看到分類下已經(jīng)生成了剛剛設置的類別谜悟，并把剛剛發(fā)布的文章歸類在此類別下。如下圖所示北秽。
image
標簽設置
- 方法跟分類設置一樣葡幸，所以不再贅述介紹
-
但是需要補充一點， front-matter 中字段有多個參數(shù)的時候羡儿，可以使用如下圖的寫法礼患。
image
Hexo 博客添加站內(nèi)搜索
- NexT主題支持集成 Swiftype是钥、 微搜索掠归、Local Search 和 Algolia缅叠。下面介紹 Local Search 的安裝吧。注意：安裝的時候要是項目根目錄下安裝虏冻。
- 安裝 hexo-generator-search
npm install hexo-generator-search --save
- 安裝 hexo-generator-searchdb
npm install hexo-generator-searchdb --save
- 在項目根目錄下的 _config.yml 配置文件的文末添加下面這段代碼肤粱。
search:
path: search.xml
field: post
format: html
limit: 10000
-
編輯主題文件夾的 _config.yml 配置文件，設置 Local searchenable 為 ture厨相。
image -
重啟服務领曼，效果圖如下：
image
博客頭像設置
添加博客頭像
-
打開主題文件夾下的 _config.yml 配置文件，通過查找功能找到 avatar蛮穿，然后把一個在線的頭像圖片地址（百度圖片中直接復制鏈接即可）庶骄，作為 url 的參數(shù)。如下圖所示：
image -
然后刷新頁面践磅，可以看到網(wǎng)站上已經(jīng)顯示了相應的頭像了：
image
設置頭像圓角并旋轉打開
- 打開主題文件夾的 source\css_common\components\sidebar 目錄下的 sidebar-author.styl 文件单刁，然后把下面的代碼添加進去即可。
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 頭像圓形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 設置循環(huán)動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束
(1s)等待1秒然后開始動畫 (1)動畫播放次數(shù)(infinite為循環(huán)播放) ]*/
/* 鼠標經(jīng)過頭像旋轉360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠標經(jīng)過停止頭像旋轉
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠標經(jīng)過頭像旋轉360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
-
效果圖如下：
image
網(wǎng)頁背景設置
- 打開主題文件夾下的 source 文件夾府适，進入 css/_custom 文件下羔飞，用文本形式打開 custom.styl 文件，然后添加下面這段代碼檐春。代碼中 url 的地址是指到： 主題文件夾/source/images/ 逻淌。
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
// 設置主題部分的透明度，具體看圖
opacity: 0.8;
}
效果圖如下：
首頁文章預覽設置
-
默認情況下疟暖，文章在首頁是全文顯示的卡儒，這樣肯定是不方便讀者瀏覽。所以需要實現(xiàn)預覽模式俐巴。效果圖如下：
image 方法一：使用 < !–more–> 手動切斷
這種方法可以根據(jù)文章的內(nèi)容朋贬，自己在合適的位置添加 < !–more–> 標簽，使用靈活窜骄，也是Hexo推薦的方法锦募。
- 方法二：添加 description
在文章的 front-matter 中添加 description 和 photos 字段，如下圖所示邻遏。如果不需要顯示圖片的話糠亩，可以把 photos 去掉。
ps：不知道 front-matter 是什么的話准验，跳轉到第二章的第4點的發(fā)布文章看下赎线。
- 方法三：自動形成摘要
在主題文件下的_config.yml配置文件中添加默認截取的長度為 150 字符，可以根據(jù)需要自行設定糊饱。
設置網(wǎng)站圖片 Favicon
-
在 阿里巴巴矢量圖標庫 中找到自己的喜歡的圖標垂寥，下載下來，覆蓋掉主題文件夾下的 source/images 目錄里面的三張圖片即可。
image
網(wǎng)頁頂部進度加載條設置
博客置頂設置
- 安裝插件
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
- 然后在需要置頂?shù)奈恼碌?Front-matter 中加上 top 即可滞项，數(shù)值越大表示等級越高狭归，越靠前顯示。
---
title: this is my first blog
date: 2019-04-14
top: 100
---
-在主題文件夾中打開 layout/_macro/post.swig 文件文判，定位到 post-header 过椎，把下面的代碼添加進去即可。
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置頂</font>
{% endif %}
-
重啟服務戏仓，效果圖如下：
image
參考文章：
