手把手教你使用 VuePress 搭建個人博客
有閱讀障礙的同學，可以跳過第一至四節，下載我寫好的 工具包:
git clone https://github.com/zhangyunchencc/vuepress-devkit.git然后從第五節開始看。
一、為什么你需要一個博客？
優秀的程序員都在寫博客，寫博客有很多好處：
- 幫助自己梳理、總結、理解知識點（個人提升）
- 幫助別人理解知識點（好人一生平安）
- 簡歷更好看，更多面試機會（升職加薪）
二、什么是 VuePress，為什么要使用 VuePress ？
VuePress 是尤雨溪（vue.js 框架作者）4月12日發布的一個全新的基於 vue 的靜態網站生成器，實際上就是一個 vue 的 spa 應用，內置 webpack，可以用來寫文檔。詳見 VuePress中文網
其實類似的建站工具有很多，比如 WordPress、Jekyll、Hexo 等，其中 WordPress 需要自己購買虛擬主機，不考慮；Jekyll 是 Github-Page 默認支持的，聽說操作比較復雜，沒有用過不做過多評價了；Hexo 之前一直在用，但一直覺得主題不好看，風格不夠簡潔優雅。自從遇見 VuePress，嗯，就是它了~
VuePress 有很多優點：
- 界面簡潔優雅（個人感覺比 HEXO 好看）
- 容易上手（半小時能搭好整個項目）
- 更好的兼容、擴展 Markdown 語法
- 響應式布局，PC端、手機端
- Google Analytics 集成
- 支持 PWA
三、開始搭建
創建項目文件夾
可以右鍵手動新建，也可以使用 mkdir 命令新建：
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 文件，最終項目結構如下所示：
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 四、一些小亮點
完成了基礎搭建后，就可以在docs目錄下新建 .md 文件寫文章了（.md 是 Markdown 語法文件，你需要知道 Markdown 的一些基本寫法，很簡單，這里給大家一份 Markdown 語法整理大集合）
下面給大家安利一些實用的方法。
代碼塊高亮
在 .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 // 是否開啟 PWApublic 文件夾下新建 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 有木有 
）
五、部署上線
說了這么多都是在本地進行的，現在我們要把本地的內容推送到某個服務器上，這樣只要有網絡，就可以隨時隨地看自己的網站了。
一般來說，有兩種方案可供選擇：
- 自己買一個服務器，阿里雲、騰訊雲等，這種方式的好處是速度有保證、可以被搜索引擎收錄，壞處是要花錢啊
土豪同學可以考慮。 - 使用 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 端頁面是這樣的：
手機端頁面是這樣的：
六、發布到自己的個人域名
如果你不滿足於 https://zhangyunchencc.github... 這樣的域名，想要一個自己個人的專屬域名，比如 http://www.zhangyunchen.cc/ ，畢竟一些大牛（阮一峰 http://www.ruanyifeng.com/blog/） 都是自己名字的網址哦，很方便很酷呢 😎
下面跟着步驟一步步來就好啦~
購買域名
我是在新網購買的，下面以新網為例，萬網是類似的。
購買完成后進入管理后台，點擊 ”解析“ 按鈕，添加下面兩條內容：
注意這里有坑！！！在 萬網 購買域名的同學請注意，第二條記錄中的 請用 @ 代替，萬網不支持
記錄值里的 IP 可以通過 ping 自己的域名得到：
ping www.username.github.io 添加 CNAME 文件
在倉庫一 USERNAME.github.io 中找到 Settings > Custom domain 把 www.zhangyunchen.cc 添加進去即可。
大功告成，打開 https://www.zhangyunchen.cc 看一下吧~~~
七、最后
- 你需要一些 Markdown 語法的基礎知識；
- 你需要一個 Github 賬號，並在里面創建兩個 repo
- Github 需要添加 ssh key，遇到問題可以百度解決；
- 個人博客不只可以用來寫技術相關的內容，也可以有自己寫的文章、隨筆，甚至上傳一些照片。
以上，
Chen | 2018.10
https://segmentfault.com/a/1190000017207205?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly