vuepress搭建個人博客並部署

想要快速搭建自己的個人博客,記錄自己的工作學習心得,爭取當一條有夢想的鹹魚

相信大家都瞭解過vue這個框架.而今天,我們的主角vuepress 就是vue的作者尤大大的一個作品.開源於大概2年前,其本意是用來爲vue及其子項目寫文檔,現在被大部分人用來搭建個人博客.之前一直有所耳聞,vuepress可以搭建博客,但也只是有所耳聞罷了,這回趁着五一在家休息的時間,簡單的學了下vuepress的用法.
今天在這裏,我會從頭一步步的將我的代碼展示給大家看,如何從0開始搭建一個個人博客,並且部署到線上.傳統的部署需要我們去購買服務器,域名,還需要做域名解析,備案之類的事情,往往需要一段時間才能完成.因此今天我們將我們的博客項目部署到github上.對的,你沒有看錯,github不僅僅只是一個保存我們代碼的網站,它還可以幫助我們展示一些靜態頁面.今天我們就用github pages 來發布自己的靜態博客.

搭建

初始化創建

首先,我們在終端輸入以下命令,來創建一個空文件夾並且進入到這個文件夾

mkdir myblog && cd $_

初始化我們的項目

yarn init -y

接着是安裝我們的依賴vuepress

yarn add -D vuepress

安裝好依賴以後,我們可以在終端鍵入

mkdir docs
echo '# This is my blog' > docs/README.md

那麼就可以看到在項目中有個docs的文件夾了,並且裏面有個README.md的文件.
接下來我們來啓動我們的項目,vuepress 提供瞭如下命令來啓動和打包我們的項目

vuepress dev docs
vuepress build docs

我們在 package.json 中來創建兩個簡單的命令來代替上面的指令

{
  "scripts": {
    "dev": "vuepress dev docs", //啓動項目
    "build": "vuepress build docs" // 編譯項目
  }
}

至此,我們就可以通過yarn dev 來啓動項目了,這時打開網址可以看到我們的項目已經運行成功了,頁面如下:

配置項目

接下來就是來配置我們的項目結構了,如標題,導航之類的.vuepress有個"約定大於配置"的思想在裏面,就是說很多東西,作者已經給我們都設置好了,我們只要按照作者提供的文檔一步步將我們的東西填入其中,就可以完成我們想要的東西.
我們在docs文件夾中新創建一個 .vuepress 文件夾 ,並在其中新建一個config.js 配置文件:

module.exports = {
    title: 'lhs的個人博客',  //標題
    keywords: '前端開發',
    description: '前端開發 lhs的個人博客',
    repo: 'https://github.com/zeroonbush/blog.git',  //倉庫地址
    base: '/blog/',  // 配合部署項目
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],
    lastUpdated: 'Last Updated',
    themeConfig: {  //主題配置
        logo: '/img/logo.png',
        nav: [  //導航欄
            { text: '首頁', link: '/' },
            { text: 'JS', link: '/js_docs/' },
            { text: 'CSS', link: '/css_docs/' },
            { text: 'Vue', link: '/vue_docs/' },
            { text: 'React', link: '/react_docs/' },
            {
                text: '2020',
                ariLabel: '2020',
                items: [  //多級導航欄
                    { text: 'May', link: '/2020/5/' },
                    { text: 'June', link: '/2020/6/' }
                ]
            },
            { text: 'github', link: 'https://github.com/zeroonbush/blog.git' }
        ],
        sidebar: {  //側邊攔
            '/2020/': [
                ['/2020/5/', '5月份'],
                ['/2020/6/', '6月份']
            ]
        }
    }
}

在寫了上面的配置之後,要記得在.vuepress文件夾中新建一個public文件夾,將我們的圖片資源放入其中.我們在引用圖片資源的時候,都是以其爲根目錄的.此時可以看到我們的項目已經變成下面的樣子,已經有了頂部的導航欄.點擊2020,可以看到還有下拉框,點擊下拉框中的選項還能看到連側邊欄都已經有了.

配置首頁結構

不知道大家到這裏有沒有發現,這個界面和vue,vuepress的官網有點像.沒錯,他們就是用vuepress來寫的,前面也提到了,vuepress設計之初就是爲了寫文檔,QAQ.
現在看主頁的內容是不是太空白了點呢,我們來給他添加點東西吧.
我們將剛開始創建的README.md文件內容改成如下:

---
home: true
heroImage: /img/banner.png
heroText: lhs的日常記錄
tagline: 喜歡打王者,只會射手
features:
- title: 是個160斤的胖子
  details: 是個160多斤的胖子,想要減肥,哪天你看不到這段話了,那說明我已經瘦下來了
---

至此,基本的頁面佈局已經差不多了,

部署

在完成我們的個人博客後,我們下一步需要做的就是將我們的個人博客部署到線上去,讓其他人能夠訪問到.

Github Pages

今天,我們不用傳統的購買服務器域名那一套,我們使用Github Pages 來部署.在github上展示靜態網站有兩個方法.

創建 username.github.io 倉庫

第一個是創建一個 github用戶名.github.io 的倉庫,別人通過 yourUserName.github.io 就能訪問到我們的項目.點擊查看:https://zeroonbush.github.io/
.

創建gh-pages 分支

第二個是創建一個項目,並且創建一個gh-pages 的分支,我們將打包後的代碼放到這個分支,別人就能通過 https://yourUserName.github.io/yourProjectName 來訪問到我們的項目,點擊查看:https://zeroonbush.github.io/blog/

如何方便快速部署?

爲了方便部署,我們可以安裝一個插件叫做 gh-pages

yarn add -D gh-pages

然後修改package.json中的腳本命令,添加如下的兩條,

"deploy": "gh-pages -d docs/.vuepress/dist",
"commit": "yarn build && yarn deploy"

然後運行yarn commit命令,如果出現下面的報錯,則是因爲你的項目還沒有關聯倉庫地址,只要關聯下問題就解決了.至於如何關聯,其實我們在github創建空項目的時候,github會告訴我們該如何做.這個比較簡單,這裏就不做過多闡述了.

關聯成功以後,我們再次執行下命令,如果出現如下的提示,那就證明我們已經成功了.

然後我們訪問我們的項目,可以看到我們的個人博客已經展示出來了,如果出現css或js加載不到的情況,則注意配置中的base 屬性,這裏面需要填寫我們的項目名.

至此,我們已經使用了vuepress搭建了一個個人博客,並且使用了Github Pages來部署我們的博客,今天的任務基本算是大功告成了.好了.到了該放鬆的時刻,選出我們的小魯班,去找凱爹突突突吧!

項目地址: https://github.com/zeroonbush/blog
可直接下載源代碼運行以查看效果