手把手教你使用 VuePress 搭建我的博客

時間 2019-11-07

標籤手把手使用 vuepress 搭建我的博客简体版

原文原文鏈接

手把手教你使用 VuePress 搭建我的博客

有閱讀障礙的同窗，能夠跳過第一至四節，下載我寫好的工具包:
git clone https://github.com/zhangyunchencc/vuepress-devkit.git 而後從第五節開始看。

1、爲何你須要一個博客？

優秀的程序員都在寫博客，寫博客有不少好處：html

幫助本身梳理、總結、理解知識點（我的提高）
幫助別人理解知識點（好人一輩子平安）
簡歷更好看，更多面試機會（升職加薪）

2、什麼是 VuePress，爲何要使用 VuePress ？

VuePress 是尤雨溪（vue.js 框架做者）4月12日發佈的一個全新的基於 vue 的靜態網站生成器，實際上就是一個 vue 的 spa 應用，內置 webpack，能夠用來寫文檔。詳見 VuePress中文網前端

其實相似的建站工具備不少，好比 WordPress、Jekyll、Hexo 等，其中 WordPress 須要本身購買虛擬主機，不考慮；Jekyll 是 Github-Page 默認支持的，據說操做比較複雜，沒有用過不作過多評價了；Hexo 以前一直在用，但一直以爲主題很差看，風格不夠簡潔優雅。自從碰見 VuePress，嗯，就是它了~ vue

VuePress 有不少優勢：webpack

界面簡潔優雅（我的感受比 HEXO 好看）
容易上手（半小時能搭好整個項目）
更好的兼容、擴展 Markdown 語法
響應式佈局，PC端、手機端
Google Analytics 集成
支持 PWA

3、開始搭建

建立項目文件夾

能夠右鍵手動新建，也可使用 mkdir 命令新建：git

mkdir vuepressBlogDemo

全局安裝 VuePress

npm install -g vuepress

進入 vuepressBlogDemo 文件夾，初始化項目

使用 npm init 或 npm init -y（默認yes）程序員

npm init -y

建立文件夾和文件

在 vuepressBlogDemo 文件夾中建立 docs 文件夾，在 docs 中建立 .vuepress 文件夾，在.vuepress中建立 public 文件夾和 config.js 文件，最終項目結構以下所示：github

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

在 config.js 文件中配置網站標題、描述、主題等信息

module.exports = {
  title: 'Chen\'s blog',
  description: '個人我的網站',
  head: [ // 注入到當前頁面的 HTML <head> 中的標籤
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增長一個自定義的 favicon(網頁標籤的圖標)
  ],
  base: '/', // 這是部署到github相關的配置
  markdown: {
    lineNumbers: false // 代碼塊顯示行號
  },
  themeConfig: {
    nav:[ // 導航欄配置
      {text: '前端基礎', link: '/accumulate/' },
      {text: '算法題庫', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 側邊欄配置
    sidebarDepth: 2, // 側邊欄顯示2級
  }
};

在 package.json 文件裏添加兩個啓動命令

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

一切就緒跑起來看看吧

npm run dev

4、一些小亮點

完成了基礎搭建後，就能夠在docs目錄下新建 .md 文件寫文章了（.md 是 Markdown 語法文件，你須要知道 Markdown 的一些基本寫法，很簡單，這裏給你們一份 Markdown 語法整理大集合）web

下面給你們安利一些實用的方法。面試

代碼塊高亮

在 .md 文件中書寫代碼時，可在 ``` 後增長 js、html、json等格式類型，代碼塊便可按照指定類型高亮算法

自定義容器

代碼：

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

效果：

支持Emoji

代碼：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

這裏有一份 Emoji 大全

支持 PWA

VuePress 默認支持 PWA，配置方法以下：

config.js 文件中增長

head: [ // 注入到當前頁面的 HTML <head> 中的標籤
  ['link', { rel: 'manifest', href: '/photo.jpg' }],
  ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],
],
serviceWorker: true // 是否開啓 PWA

public 文件夾下新建 manifest.json 文件，添加

{
  "name": "張三",
  "short_name": "張三",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "張三的我的主頁",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./photo.jpg",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

最後在 iPhone 的 safrai 瀏覽器中打開本網站，點擊 +添加到主屏幕 就能在桌面看到一個像原生 App 同樣的圖標（感受本身寫了一個 App 有木有）

5、部署上線

說了這麼多都是在本地進行的，如今咱們要把本地的內容推送到某個服務器上，這樣只要有網絡，就能夠隨時隨地看本身的網站了。

通常來講，有兩種方案可供選擇：

本身買一個服務器，阿里雲、騰訊雲等，這種方式的好處是速度有保證、能夠被搜索引擎收錄，壞處是要花錢啊土豪同窗能夠考慮。
使用 Github Pages 。什麼是 Github Pages 呢？簡單說就是 Github 提供的、用於搭建我的網站的靜態站點託管服務。不少人用它搭建我的博客。這種方式的好處是免費、方便，壞處是速度可能會有些慢、不能被國內的搜索引擎收錄。

最終我選擇了方案2，下面將給你們講解如何使用 Github Pages 服務。

登錄 Github

打開 github 網站，登錄本身的 github 帳號（沒有帳號的快去註冊並面壁思過做爲一個優秀的程序員爲啥連一個github帳號都沒有）

接着咱們新建兩個倉庫，

新建倉庫一： USERNAME.github.io （不用克隆到本地）

注意！
USERNAME 必須是你 Github 的帳號名稱，不是你的名字拼音，也不是你的非主流網名，不要瞎起，要保證和Github帳號名如出一轍！

例如個人 Github 帳號名稱是 zhangyunchencc

那麼新建倉庫，Repository name 就填寫爲：zhangyunchencc.github.io

這個倉庫建好後，不用克隆到本地，內容更新修改都在下面的倉庫中進行。

新建倉庫二：隨便起一個名字，好比：vuepressBlog （克隆到本地）

這個項目是用來開發博客的，之後只須要改這個項目就夠了。

使用工具包的，將 vuepress-devkit 中的內容拷貝到 vuepressBlog 文件夾中
本身從頭搭建的，將 vuepressBlogDemo 文件夾的內容拷貝到倉庫二，並在根目錄下建立 deploy.sh 文件，內容以下：

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run build

# 進入生成的文件夾
cd docs/.vuepress/dist

# 若是是發佈到自定義域名
# echo 'www.yourwebsite.com' > CNAME

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

# 若是你想要部署到 https://USERNAME.github.io
git push -f git@github.com:USERNAME/USERNAME.github.io.git master

# 若是發佈到 https://USERNAME.github.io/<REPO>  REPO=github上的項目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

修改倉庫二中的 deploy.sh 發佈腳本

把文件中的 USERNAME 改爲 Github 帳號名，例如個人帳號名是 zhangyunchencc，那麼就能夠改成：

# 若是你想要部署到 https://USERNAME.github.io
git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master

這樣倉庫二和倉庫一就創建了關聯。

簡單說兩者的關係是：倉庫一負責顯示網站內容，咱們不須要改動它；平常開發和新增內容，都在倉庫二中，並經過 npm run deploy 命令，將代碼發佈到倉庫一。

在 package.json 文件夾中添加發布命令（使用工具包的請忽略）

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

大功告成，運行發佈命令

npm run deploy

此時打開 Github Settings 中下面的連接: https://zhangyunchencc.github.io/ 便可看到本身的主頁啦~

PC 端頁面是這樣的：

手機端頁面是這樣的：

6、發佈到本身的我的域名

若是你不知足於 https://zhangyunchencc.github... 這樣的域名，想要一個本身我的的專屬域名，好比 http://www.zhangyunchen.cc/ ，畢竟一些大牛（阮一峯 http://www.ruanyifeng.com/blog/）都是本身名字的網址哦，很方便很酷呢 😎

下面跟着步驟一步步來就好啦~