丟掉爛大街的Hexo吧，用Vuepress搭建專屬你的博客吧

1、先來聊聊搭建博客

1.1. 什麼人喜歡折騰博客

一般若是不是愛折騰或者有特別需求的普通人，通常對於搭建博客的需求其實不大，一般主要一下幾類人會搭建博客本身玩玩。

• 程序員 (喜歡寫一些技術博客，分享一些問題)
• 設計工做者 (須要一個平臺暫時本身，一般的網站知足不了他們)
• 技術愛好者 (不必定是幹IT的，可是但願搞一個博客交流的)
• 文藝青年 (喜歡寫寫文章分享給你們的)
• 極客 (喜歡追求極致，喜歡作一些酷炫吊炸天的網站的異類)

對於上述幾類人羣，咱們再細分一下，他們可以搭建博客的方式。

• 博客平臺 (CSDN、博客園、Farbox之類的一站式平臺，寫好文章網上丟就能夠了)
• 純本身碼 (須要超強的技術壁壘)

• 搭建博客的工具 (下面會進行詳細說明，目前也是最主流的方式)

  • WordPress
  • Hexo
  • Hugo
  • Vuepress (本文主要說的)
  • jekyll

1.2. 簡單對比一下幾個吧！(不廢話，直接說缺點)

• WordPress：第一個是麻煩，學習成本高，第二個必需要搞一個本身域名主機，操做很麻煩，新手門檻高。
• Hexo：好，好，好 ，輕量 、簡單 、實用 、方便 —————but 爛大街了，如今隨便百度仍是谷歌搜一下都是Hexo搭建博客，NexT主題也被用爛大街了，致使搭一個博客一點新意都沒，沒有那種成就感。(固然你本身能另寫主題就算了)
• Hugo：小衆 文檔少 優化少 主題少 坑多
• jekyll：跟Hugo也差很少
• Vuepress：哈哈哈，比Hugo/jekyll 文檔還少，主題更少 (驚不驚喜，意不意外) ，教程也少，要否則都是重複的。--------but 真心好看，是尤雨溪大神的力做，優化更不要說了，總體風格極簡卻又很是適合文檔閱讀，並且流暢，最重要，使用的人少，個性化定製多，只要你會點vue，你的博客只屬於你。

1.3. 廢話很少說，直接看效果

預覽效果：https://domyselfzy.github.io/

首頁

文章

時間線

關於我

2、正菜開始

2.1 直接開幹

vuepress官網：https://vuepress.vuejs.org/zh/

若是想搭建一個簡單的vuepress博客，很簡單。

1. 項目安裝

   不推薦全局安裝方式，由於一個新手很難把握文件層級

   # 將 VuePress 做爲一個本地依賴安裝
   yarn add -D vuepress # 或者：npm install -D vuepress
   
   # 新建一個 docs 文件夾
   mkdir docs
   
   # 新建一個 markdown 文件
   echo '# Hello VuePress!' > docs/README.md
   
   # 開始寫做
   npx vuepress dev docs

   目錄以下：

2. package.json配置

   須要在剛剛生成的文件夾下，找到package.json，在裏面添加如下內容（若是沒有本身新增）

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

3. 運行命令

   yarn docs:dev # 或者：npm run docs:dev

   在瀏覽器地址上輸入：http://localhost:8080/

   因而你就看到如下這個頁面了

4. 構建和生成靜態頁面

   yarn docs:build # 或者：npm run docs:build

至此，一個簡單基於vuepress的博客就誕生了！是否是如此簡單。

2.2 基於vuepress主題的搭建

確定不少人看完第一眼感受，靠，這麼low，也好意思拿出來，就是一個白頁嘛~

對 ，你說的都對 ，就是這麼個白頁，可是正是由於這個白頁才體現它的強大。

why？？？

由於咱們以後寫博客基本都是基於markdown編寫 ，因此咱們以後vuepress的頁面大部分狀況均可以經過markdown進行佈局。固然若是你是vue的高手，你也能夠本身使用vue編寫layout佈局。

2.2.1 vuepress-theme-reco

這個主題應該是現存vuepress最好的一個主題之一，是博主午後南雜製做的一個超讚主題。

主題地址：https://vuepress-theme-reco.recoluan.com/

2.2.2 動手幹

以前咱們是以項目安裝的方式進行構建

如今不須要了 ，直接安裝主題就完了。（廢棄以前的文件夾，從新指定一個新文件夾位置my-blog，能夠因此指定）

# create
npx vuepress-theme-reco-cli init my-blog
# or
npm install  -g
reco-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build

安裝的時候選擇1.0版本

安裝完成後目錄以下：

基本和以前的相似 ，只是含一些主題文件對應的.md文件

這個時候文件夾是沒有node_modules依賴模塊，因此咱們仍是要按照以前的方式從新依賴一遍

yarn add -D vuepress

慢慢等待完成

而後，直接運行命令yarn dev直接看效果吧。

效果圖：

這個就是主題文件運行的效果了。

3、優化篇

至此主要的工做已經所有完成了，下面你就能夠定製你須要的博客了。

固然離定製化博客仍是差之千里，有興趣能夠關注個人公衆號，看一下我以後的文章，專門對vuepress主題進行優化。

具體效果能夠參考個人博客：https://domyselfzy.coding.me/

錯過期光