個人博客|第一章|手把手教你搭建、上線個人博客

「 最具價值的編程，莫過於服務生活。」

前言

Hello，我是淡漠，今天帶大家一起搭建個人博客。個人博客一直都是非常受歡迎的個人項目，個人博客分靜態和動態兩種，淡漠個人比較青睞靜態博客，靜態不需要管理後端，相比動態博客，靜態博客可以不需要花一分錢，開發成本要低一些，畢竟作為學生黨，買伺服器放一個博客網站有點浪費，也可以把精力集中於寫博客，而不是開發博客。

市面上有很多搭建靜態博客的工具，這裡以Hexo為例，帶大家「速成」一下。

1.1 創建博客項目

安裝Hexo

npm install -g hexo-cli

初始化博客項目

hexo init dm-blog

進入項目文件夾，安裝相關依賴

npm install

目錄結構

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

打開_config.yml，配置基本信息

# Site
title: 淡漠Blog
subtitle: ''
description: '淡漠DM的博客'
keywords:
author: 淡漠DM
language: zh-CN
timezone: ''

啟動項目

hexo s

常用命令介紹

命令簡寫含義hexo serverhexo s本地啟動hexo generatehexo g生成靜態文件hexo deployhexo d部署網站hexo clean無清除緩存及生成的靜態文件1.2 修改主題

選擇自己喜歡的主題

https://hexo.io/themes/

這裡選擇Kaze

進入themes文件夾，下載主題，並重命名為kaze

cd themes

git clone https://github.com/theme-kaze/hexo-theme-Kaze.git kaze

修改配置文件（_config.yml）

theme: kaze

主題名稱為文件夾名稱，默認為：landscape

回到項目根目錄，啟動項目

hexo clean
hexo g
hexo s

1.3 完善博客項目1.3.1 修改基本信息

進入themes/kaze/source ，創建文件夾 img，放入logo圖片和作者頭像

title: 淡漠Blog
author: 淡漠DM
logo_img: /img/logo.png # put the logo on the ${blog_path}/source/img/${picname}.png or use urls
author_img: /img/author.jpg
author_description: 最有趣的編程，莫過於服務生活。

1.3.2 開啟站點訪問量統計（默認關閉）

footer:
statistics:
enable: true
type: busuanzi # now version only supports busuanzi
pv:
enable: true
style: 本站總訪問量{}次 # the style will be shown as $1{pv}$2
uv:
enable: true
style: 本站總訪客數{}次

enable 開啟訪問量統計（默認關閉）

type 目前僅支持 busuanzi

pv 訪問總量統計

uv 用戶總量統計

1.3.3 友鏈

links:
小R資源:
url: https://www.tomyres.com
avatar: https://www.tomyres.com/static/images/logo/res_logo_1.png
description: 小R資源,免費的編程資源在線分享

1.3.4 文章頭部

hello-world.md

---
title: Hello World
banner_img: https://www.tomyres.com/static/images/logo/res_logo_1.png
category: Hi
tag: hello
excerpt: 這是一段簡介
---

banner_img 文章封面

category 分類

tag 標籤

excerpt 簡介

1.3.5 代碼高亮

在md文件寫一段JavaScript代碼

```javascript
const smoothScrollToTop = () => {
let yTopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
if (yTopValve > 1) {
window.requestAnimationFrame(smoothScrollToTop);
scrollTo(0, Math.floor(yTopValve * 0.85));
} else {
scrollTo(0, 0);
}
};

setTimeout(() => {
document.getElementById('scrollbutton').onclick = smoothScrollToTop;
}, 0);
```

關閉 highlight，開啟 prismjs（_config.yml）

highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''

設置主題（kaze/_config.yml）

prism:
theme: tomorrow

1.3.6 評論

這裡使用 valine 實現評論，官方網 https://leancloud.cn/

進入控制臺後點擊左下角創建應用

應用創建好以後，進入剛剛創建的應用，選擇左下角的設置>應用Key，然後就能看到你的APP ID和APP Key了

開啟評論功能 kaze/_config.yml

comment:
enable: true
type: valine # valine | gitalk | livere | disqus | we recommend valine
# gitalk config details can see in https://github.com/gitalk/gitalk/blob/master/readme-cn.md
valine:
appId: 你的appId
appKey: 你的appKey

1.4 部署gitee

創建一個公開的倉庫，倉庫名稱需要和個人空間地址相同

個人空間地址查看方式：設置——>基本設置——>個人資料

初始化

git init
git remote add origin [e-mail]:個人空間地址/倉庫名稱.git
git pull origin master

提交項目

git add .
git commit -m '我的第一個博客項目'
git push origin master

第一次提交時，確保倉庫沒有文件，因為如果倉庫有文件，且文件名字正好和本地項目的某個文件名相同，會導致提交失敗

修改配置文件

deploy:
type: git
repo: [e-mail]:個人空間地址/倉庫名稱.git
branch: master

部署到gitee

npm install --save hexo-deployer-git

hexo clean
hexo g
hexo d

選擇強制使用https

部署後會顯示網站地址，直接訪問即可。

項目每一次更新提交到gitee之後，需要更新部署

注意：

如果更新部署後訪問項目沒有變化，可以嘗試 CTRL+F5 強制刷新，或清除瀏覽器緩存。

個人博客系列教程

—

公眾號回復 個人博客