使用vuepress免費(fèi)搭建個(gè)人博客，白嫖就完事兒了

一、什么是 vuepress

VuePress 是一個(gè)基于 Vue 的輕量級(jí)靜態(tài)網(wǎng)站生成器，以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。 它是為了滿足 Vue 自己的子項(xiàng)目文檔的需求而創(chuàng)建的。
實(shí)際上就是一個(gè) vue 的 spa 應(yīng)用，內(nèi)置 webpack，可以用來寫文檔。詳見 VuePress中文網(wǎng)
效果：

效果1.png

效果2.png

二、怎么白嫖？

本文推薦兩種方案：

具體使用方法，后面會(huì)說，下面就開始動(dòng)手。

三、開始

git倉庫：https://github.com/chenjing0823/githubio
想直接體驗(yàn)白嫖的 可以直接拉這個(gè)倉庫，然后去第四章。

3.1 搭建項(xiàng)目

  1. 創(chuàng)建目錄githubio， mkdir githubio，進(jìn)入項(xiàng)目目錄githubio， 初始化項(xiàng)目
npm init -y
  1. 安裝 vuepress
npm install vuepress -S
  1. 在 githubio 文件夾中創(chuàng)建docs文件夾，在docs中創(chuàng)建.vuepress文件夾 和 README.md，在.vuepress中創(chuàng)建public文件夾和config.js文件，項(xiàng)目結(jié)構(gòu)如下所示：
githubio
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
  1. 在config.js文件內(nèi) 配置網(wǎng)站標(biāo)題、描述、主題等信息，具體配置看官方文檔 vuepress config 
module.exports = {
  title: 'Chen\'s blog',
  description: '我的個(gè)人網(wǎng)站',
  head: [ // 注入到當(dāng)前頁面的 HTML <head> 中的標(biāo)簽
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一個(gè)自定義的 favicon(網(wǎng)頁標(biāo)簽的圖標(biāo))
  ],
  base: '/', // 這是部署到github相關(guān)的配置
  markdown: {
    lineNumbers: false // 代碼塊顯示行號(hào)
  },
  themeConfig: {
    logo: '/logo.JPG',
    nav:[ // 導(dǎo)航欄配置
      {text: '導(dǎo)航一', link: '/route-one/' },
      {text: '導(dǎo)航二', link: '/route-two/'},
      {text: '外鏈', link: 'https://baidu.com'}      
    ],
    sidebarDepth: 2, // 側(cè)邊欄顯示2級(jí)
    sidebar: 'auto'  // 側(cè)邊欄配置
  }
};
  1. 在 package.json 內(nèi)，添加命令：
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
  1. 一切就緒，跑項(xiàng)目查看效果
npm run dev

3.2 豐富項(xiàng)目

添加多個(gè)側(cè)邊欄，修改config.js, 我參考的是 vue 的配置 vue doc

const sidebar = {
  'route-one': [
    {
      title: '目錄一',
      collapsable: false,
      children: [
        '',
        '/route-one/readme1',
        '/route-one/readme2',
      ]
    },
    {
      title: '目錄二',
      collapsable: false,
      children: [
        '/route-one/readme3',
        '/route-one/readme4',
      ]
    }
  ],
  'route-two': [
    {
      title: '目錄一',
      collapsable: false,
      children: [
        '',
        '/route-two/readme1',
        '/route-two/readme2',
      ]
    }
  ]
}

module.exports = {
  title: 'Chen\'s blog',
  description: '我的個(gè)人網(wǎng)站',
  head: [ // 注入到當(dāng)前頁面的 HTML <head> 中的標(biāo)簽
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一個(gè)自定義的 favicon(網(wǎng)頁標(biāo)簽的圖標(biāo))
  ],
  base: '/', // 這是部署到github相關(guān)的配置
  markdown: {
    lineNumbers: false // 代碼塊顯示行號(hào)
  },
  themeConfig: {
    logo: '/logo.JPG',
    nav:[ // 導(dǎo)航欄配置
      {text: '導(dǎo)航一', link: '/route-one/' },
      {text: '導(dǎo)航二', link: '/route-two/'},
      {text: '外鏈', link: 'https://baidu.com'}      
    ],
    sidebarDepth: 2, // 側(cè)邊欄顯示2級(jí)
    sidebar: {
      collapsable: false,
      '/route-one/': sidebar['route-one'],
      '/route-two/': sidebar['route-two']
    }
  }
};

添加各目錄結(jié)構(gòu) 對(duì)應(yīng)的.md文檔，如下

image.png

.md文件內(nèi)容 側(cè)邊標(biāo)題 自由發(fā)揮。

最后，繼續(xù)查看本地效果，看到效果后，任務(wù)完成。

四、開始部署（正式白嫖）

4.1 github

4.1.1 登錄 github ，新建倉庫

從 github pages 內(nèi)可以看到詳細(xì)的內(nèi)容，我在這里總結(jié)一下。
新建倉庫，必須是 <username>.github.io。例如 我的 username 是 chengjing0823，那么我新建的倉庫就是 chenjing0823.github.io

image.png

因?yàn)槲乙呀?jīng)創(chuàng)建過了，會(huì)有警告
image.png

倉庫建好后，就再也不去動(dòng)他了

4.1.2 配置發(fā)布腳本

在剛剛的 githubio 項(xiàng)目?jī)?nèi)，跟package.json同級(jí)，新建文件 deploy.sh，內(nèi)容如下：

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 生成靜態(tài)文件
npm run build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
# git push -f git@github.com:chenjing0823/chenjing0823.github.io.git master
git push -f https://github.com/chenjing0823/chenjing0823.github.io.git master
# 如果發(fā)布到 https://USERNAME.github.io/<REPO>  REPO=github上的項(xiàng)目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

然后在 package.json 內(nèi)新增腳本

"scripts": {
  "deploy": "bash deploy.sh"
}

后續(xù)也可以使用免費(fèi)的CI資源Travis CI進(jìn)行持續(xù)集成，將白嫖進(jìn)行到底??
意思大概類似于 Docker實(shí)戰(zhàn)，配合使用Travis CI進(jìn)行持續(xù)集成 的 Travis CI自動(dòng)編譯部分，可以靈活貫通。

最后運(yùn)行腳本

npm run deploy

打開鏈接 ：http://chenjing0823.github.io/ 查看效果

image.png

image.png

4.2 gitee

使用gitee白嫖相對(duì)簡(jiǎn)單很多

只需要將 githubio 項(xiàng)目，上傳到 gitee 倉庫。
點(diǎn)擊Gitee Pages

image.png

  • 上傳生成好的html文件到倉庫
  • 倉庫界面-服務(wù)-Gitee Pages 選擇部署分支、填寫 部署目錄 （Hugo生成的在/public）, 填寫后 點(diǎn)擊 更新即可
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容