前言
想要分分鐘搭建自己博客，可以直接跳到最后，教你如何分分鐘搭建博客。
速覽
- 這是一款 Vuepress 主題，集成了博客所需的分類、TAG墻、分頁、評(píng)論等功能。
- 主題追求極簡(jiǎn)，配置上手簡(jiǎn)單，適配移動(dòng)端。
- 預(yù)覽地址
- 主題插件GitHub地址
- 個(gè)人博客部署GitHub地址
- 博客效果展示：
主題使用
安裝主題
創(chuàng)建一個(gè)新的項(xiàng)目 my-blog：
mkdir my-blog
cd my-blog
初始化 yarn 或 npm ：
yarn init 或 npm init -y
安裝 vuepress 和 vuepress-theme-melodydl：
yarn add vuepress vuepress-theme-melodydl
或
npm install vuepress vuepress-theme-melodydl
創(chuàng)建 src/_posts 文件夾和 Vuepress 配置文件，項(xiàng)目結(jié)構(gòu)大致為：
my-blog
├── src # Blog 源文件目錄
│ ├── .vuepress # Vuepress 目錄
│ │ └── public # Vuepress 靜態(tài)資源文件
│ │ └── config.js # Vuepress 配置文件
│ └── about # About 頁面 文件夾
│ │ ├── index.md # about 頁面內(nèi)容文件
│ └── _posts # 博客文件夾
│ ├── xxx.md
│ ...
└── package.json
在 package.json 加入 script 字段：
{
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src"
}
}
配置主題
在 src/.vuepress/config.js 中配置 Vuepress 和主題：
<details>
<summary>點(diǎn)擊展示配置示例</summary>
module.exports = {
// 網(wǎng)站 Title
title: 'Top 的博客 ｜ Top Blog',
// 網(wǎng)站描述
description: '個(gè)人博客',
// 網(wǎng)站 favicon 圖標(biāo)設(shè)置等
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
],
// 使用的主題
theme: 'melodydl',
// 主題配置
themeConfig: {
title: 'Top Blog',
// 個(gè)人信息（沒有或不想設(shè)置的，刪掉對(duì)應(yīng)字段即可）
personalInfo: {
// 名稱
name: 'melodydl',
// 頭像 public文件夾下
avatar: '/avatar-top.jpeg',
// 頭部背景圖
headerBackgroundImg: '/avatar-bg.jpeg',
// 個(gè)人簡(jiǎn)介 (支持 HTML)
description: 'In me the tiger sniffs the rose<br/>心有猛虎，細(xì)嗅薔薇',
// 電子郵箱
email: 'facecode@foxmail.com',
// 所在地
location: 'Shanghai, China'
},
// 頂部導(dǎo)航欄內(nèi)容
nav: [
{text: 'HOME', link: '/' },
{text: 'ABOUT', link: '/about/'},
{text: 'TAGS', link: '/tags/'}
],
// 首頁頭部標(biāo)題背景圖設(shè)置，圖片直接放在 public 文件夾下
header: {
home: {
title: 'Top Blog',
subtitle: '好好生活，慢慢相遇',
headerImage: '/home-bg.jpeg'
},
// tag頁面頭部標(biāo)題背景圖設(shè)置，圖片直接放在 public 文件夾下
tags: {
title: 'Tags',
subtitle: '遇見你花光了我所有的運(yùn)氣',
headerImage: '/tags-bg.jpg'
},
// 文章詳情頭部背景圖
postHeaderImg: '/post-bg.jpeg',
},
// 社交平臺(tái)帳號(hào)信息
sns: {
csdn: {
account: 'csdn',
link: 'https://blog.csdn.net/weixin_44002432',
},
weibo: {
account: 'weibo',
link: 'https://weibo.com/u/5656925978',
},
juejin: {
account: 'juejin',
link: 'https://juejin.im/user/3843548382238791'
},
zhihu: {
account: 'zhihu',
link: 'https://www.zhihu.com/people/sheng-tang-de-xing-kong'
},
github: {
account: 'github',
link: 'https://github.com/youdeliang'
}
},
// 底部 footer 的相關(guān)設(shè)置
footer: {
// gitbutton 配置
gitbtn: {
// 倉庫地址
repository: "https://ghbtns.com/github-btn.html?user=youdeliang&repo=vuepress-theme-top&type=star&count=true",
frameborder: 0,
scrolling: 0,
width: "80px",
height: "20px"
},
// 添加自定義 footer
custom: `Copyright © Top Blog 2020 <br />
Theme By <a target="_blank">VuePress</a>
| <a target="_blank">youdeliang</a>`
},
// 分頁配置
pagination: {
// 每頁文章數(shù)量
perPage: 5,
},
// vssue 評(píng)論配置, 如果不需要，可以設(shè)置 comments: false
comments: {
owner: 'youdeliang',
repo: 'vuepress-theme-melodydl',
clientId: 'dfba8ecad544784fec1f',
clientSecret: '1358ac11bc8face24f598601991083e27372988d',
autoCreateIssue: false,
},
}
}
</details>
Vssue 評(píng)論插件
如果你知道 Gitment 和 Gitalk，那么 Vssue 其實(shí)和它們實(shí)現(xiàn)的功能沒什么區(qū)別 —— 在 Github 的 Issue 系統(tǒng)中存儲(chǔ)評(píng)論，在你的頁面上發(fā)表和展示評(píng)論，還可以編輯和刪除評(píng)論，提供了 Vuepress 的插件（最初的動(dòng)力就是給自己的 Vuepress 博客開啟評(píng)論）。
Vssue 評(píng)論插件使用可以查看文檔手冊(cè)。傳送門。
about頁面配置
---
layout: about
title: About
subtitle: 你可以很好，但你無需完美
headerImage: /about-bg.jpg # public 文件夾下的圖片
---
下面為個(gè)人信息等內(nèi)容...
創(chuàng)建博文
在 src/_posts 下創(chuàng)建 md 文件
<!-- _posts/2019-04-01-JS異步編程方案總結(jié).md -->
---
title: JS異步編程方案總結(jié)
date: 2019-04-01
tags:
- Promise
- JavaScript
---
本篇博客主要是對(duì) Javcscript 異步編程方案總結(jié)
more 上面的內(nèi)容是摘要，將顯示在目錄中。
<!-- more -->
more 下面的內(nèi)容只有瀏覽這篇文章時(shí)才會(huì)完全展示，不會(huì)顯示在目錄中。
運(yùn)行相應(yīng) script 生成你的博客網(wǎng)站
# 開發(fā)
npm run dev
# 構(gòu)建
npm run build
Github Action 免費(fèi)自動(dòng)部署博客
添加.github/workflows/deploy.yml 文件
name: Build and Deploy
on: [push] // 推送代碼觸發(fā)腳本
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets._TOKEN }} // github Token
TARGET_REPO: youdeliang/youdeliang.github.io // 倉庫
TARGET_BRANCH: gh-pages // build 之后推到的分支名
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: src/.vuepress/dist/ //build 之后的目錄
CNAME: www.ydlcq.cn
secrets Token 生成步驟：
首先
[圖片上傳失敗...(image-f25e6f-1639035242615)]
下一步
[圖片上傳失敗...(image-6c29d5-1639035242615)]
[圖片上傳失敗...(image-2cf99-1639035242615)]
修改github配置
首先必須將倉庫名稱改成youdeliang.github.io,用戶名加.github.io格式，點(diǎn)擊項(xiàng)目 setting。
[圖片上傳失敗...(image-3b9f2c-1639035242615)]
然后，找到GitHub Pages點(diǎn)擊Check it out here!
找到source選擇打包上傳的分支和文件夾目錄，點(diǎn)擊save。
[圖片上傳失敗...(image-b9a3a-1639035242615)]
最后生成鏈接就是你博客的鏈接。
[圖片上傳失敗...(image-3db0be-1639035242615)]
其他部署具體步驟可以參考 Vuepress 官方文檔。 傳送門
分分鐘搭建博客
部署博客示范項(xiàng)目
Top Blog，可以把項(xiàng)目直接拷過去，需要在項(xiàng)目中找到config.js和package.json將里面的git地址或重要信息修改成自己的，不懂如何修改可以查看上面詳細(xì)教程（git地址要改成自己的，其他的后面修改也可以）。運(yùn)行yarn install, yarn dev 快速訪問。部署方式參照上面免費(fèi)部署流程，分分鐘搭建漂亮的博客。
最后
如果覺得主題好用的話或者需要改進(jìn)的地方，歡迎點(diǎn)贊Star和提issue，你的鼓勵(lì)是對(duì)我莫大的支持，謝謝??。
