Hugo Hexo部落格搭建及Hugo的自定義配置

世界上最快的**構建框架。

hugo是最受歡迎的開源靜態站點生成器之一。憑藉其驚人的速度和靈活性，hugo使建築**再次變得有趣。

hugo官網

安裝教程

（a）deploy.sh檔案放在站點根目錄下；

（b）執行方法分兩種（windows下）：

#!/bin/bash

echo -e "\033[0;32mdeploying updates to github...\033[0m"
# build the project.
hugo # if using a theme, replace by `hugo -t `
# go to public folder
cd public
# add changes to git.
git add -a
# commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
figit commit -m "$msg"
# push source and build repos.
git push origin master
# come back
cd ..

hexo官網

hexo搭建教程

hexo的next主題安裝

阿里巴巴向量庫

npm install -g yarn

# node -v

# npm -v
# yarn --version

主題檔案的依賴安裝和打包。

# cd ./themes/even/

# yarn install
# yarn build

根據站點根目錄下config.toml檔案中的identifier屬性匹配字型圖示名稱。

圖示顯示出來後感覺和字距離太近了，可以調整下css樣式，配置下站點根目錄下的config.toml檔案。

配置站點根目錄檔案custom.css檔案（注意這是css檔案，不要將themes中的scss樣式直接複製過來改改，會報錯），自定義custom.css、custom.js可以覆蓋主題裡設定的scss、js，這樣我們可以不用去改動主題檔案，方便以後對主題的切換。

/* 設定選單欄icon偏移位置 */

.menu-item-link .iconfont::before 

/* ******************************=custom.css ******************************==== */

/* 設定選單欄icon偏移位置 */
.menu-item-link .iconfont::before 
/* 設定title字型大小 */
position: relative;
font-size: 36px;
line-height: 68px;
}/* 設定title上橫線 */
content: '';
position: absolute;
top: -10px;
left: 27px;
width: 160px;
height: 2px;
background-color: #333;
}/* 設定title下橫線 */
content: '';
position: absolute;
bottom: -10px;
left: 0;
left: 27px;
width: 160px;
height: 4px;
background-color: #333;
}/* 去除頂部border */
body 
/* 讓閱讀更多居中 */
.read-more 
/* 調整閱讀更多樣式 */
.post .post-content .read-more .read-more-link 
/* 設定文章盒子陰影 */
.post 
/* 調整返回頂部icon位置和大小 */
.back-to-top 
/* 設定選單項的標籤、分類頁面樣式 */
.terms .terms-tags .terms-link 
/* 設定選單項的標籤、分類頁面的統計數字樣式 */
.terms .terms-tags .terms-link .terms-count 
/* 設定底部heart跳動樣式動畫 */
color: #ff7171;
display: inline-block;
animation: heartanimate 1.33s ease-in-out infinite;
}@keyframes heartanimate 
10%, 30% 
20%, 40%, 60%, 80% 
50%, 70% 
}

個人部落格搭建 介紹幾種部落格搭建框架

hexo 是乙個快速 簡潔且高效的部落格框架。hexo 使用 markdown 或其他渲染引擎 解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。hexo的主題樣式也有很多好看的，而且github都有star上萬的。說明還是很受歡迎的。jekyll 是乙個簡單的部落格形態的靜態站點生產機器。它有乙...

github page jekyll搭建部落格

第一次就寫一下，自己在github上利用github page這個功能搭建部落格的過程也算是乙個教程吧。第一次寫有什麼不對的地方請大家指正啦。首先想要使用github page搭建乙個部落格你需要一些準備，也就是一些儲備知識。你先要了解git的基本用法，這裡推薦一些廖雪峰的部落格，感覺寫的很好很適合...

Hexo GitHubPage搭建部落格

hexo 使用github建立乙個倉庫，倉庫名為使用者名稱，具體為 username.github.io 在hexoblog資料夾下 即執行hexo init命令資料夾 找到 config.yml檔案，在最下面配置 deploy type git repository 使用自己的github，這是我...