1024,快速打造你的文件庫/靜態部落格

jsliang發表於2019-03-04

使用 GitHub Pages 和 VuePress 搭建網站

Create by jsliang on 2018-10-20 10:34:39
Recently revised in 2018-10-24 13:54:52

Hello 小夥伴們,如果覺得本文還不錯,記得給個 star , 你們的 star 是我學習的動力!GitHub 地址

 本文教你如何利用 GitHub 平臺搭建自己的部落格/文件庫。
 如果,你的目的僅僅是想了解如何配置。那麼,你應該在看完 第三章 基礎配置 後,就可以自己去寫自己的部落格/文件庫,遇到不懂的問題,可以自己翻閱 VuePress 文件,解決你所需要解決的問題。
 如果,你的目的是具體查詢某元件:例如導航條、例如側邊欄的配置。那麼,你可以直接查詢目錄,跳到對應章節進行閱讀。

參考文件:

目前效果:

1024,快速打造你的文件庫/靜態部落格
1024,快速打造你的文件庫/靜態部落格

一 目錄

目錄名
一 目錄
二 前言
三 基礎配置
3.1 搭建 GitHub Pages
3.2 搭建 VuePress
  3.2.1 目錄講解
  3.2.2 導航欄
  3.2.3 側邊欄
  3.2.4 預設首頁
四 VuePress 進階
4.1 修改樣式

二 前言

返回目錄

 一般的網站,大體由三部分組成:域名、伺服器部署環境以及部署程式碼。

  • GitHub Pages,由 GitHub 網站服務,為眾多 GitHub 使用者提供了良好的伺服器部署環境以及域名的好工具。【Github Pages 官網】
  • VuePress,是以 Vue 為驅動的主題系統的簡約靜態網站生成工具 balabala……它是我們尤雨溪大神折騰出來的一個工具,初始目的是為了方便他使用 Markdown 語法來寫文件,然後生成 HTML 程式碼,部署到伺服器上即可。在眾多網友的修改下,它可以拿來寫靜態網站,也就是可以拿來發布我們編寫的博文。【VuePress 官網】

 說到這裡,小夥伴們大概懂了我們要講什麼了~
 但是,如果這只是一篇關於如何入門 GitHub Pages 和 VuePress 的文件,我會覺得毫無意義。所以,jsliang 希望這篇文章能夠整合網上的 GitHub Pages 和 VuePress 資料,並且比它們豐富一丟丟,加入 jsliang 使用心得,讓小夥伴們看完無需翻閱大量文章也能快速做好自己的個人文件庫/部落格。那樣,我就心滿意足了。因為……

不折騰的前端,跟鹹魚有什麼區別!

 本文涉及的技術點:

  • GitHub
  • Git
  • Markdown

 如果你不是很熟悉上面的技術,jsliang 推薦你去百度下資料,先學習下這些技術,再回來繼續學習。其中 GitHub 和 Git 的文章 jsliang 尚未整理,小夥伴只能去百度獲取資料了,這裡我提供一篇自己寫的 Markdown文章:地址
 如果你熟悉且瞭解上面的技術,那麼,讓我們愉快地繼續往下去折騰吧!

三 基礎配置

3.1 搭建 GitHub Pages

返回目錄

  1. 新建倉庫( New repository ),在倉庫名( Repository name )中輸入 使用者名稱.github.io,例如我的就是:LiangJunrong.github.io,然後點選 Create repository 即可建立一個部署好的環境。
1024,快速打造你的文件庫/靜態部落格

  1. Clone 專案至電腦,並新增 README.mdindex.html
1024,快速打造你的文件庫/靜態部落格

1024,快速打造你的文件庫/靜態部落格

1024,快速打造你的文件庫/靜態部落格

README.md

Hello Github Pages
===

 這是我的 GitHub Pages 初始目錄
複製程式碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Github Pages</title>
    <style>
        .container {
            margin-top: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="container">Hello Github Pages</h1>
</body>
</html>
複製程式碼

  1. 上傳到 GitHub:
git add .
git commit -m "Github Pages"
git push
複製程式碼

  1. 開啟 使用者名稱.github.io
1024,快速打造你的文件庫/靜態部落格

 如上,完成 GitHub Pages 的搭建,現在我們已經擁有了一個免費部署靜態頁面的平臺了。那麼,下面我們將講解如何通過 Markdown + VuePress 來編寫部落格。

3.2 搭建 VuePress

返回目錄

  1. 安裝 VuePress

 在你需要存放的目錄中,通過終端命令列安裝 VuePress:npm i vuepress -D

1024,快速打造你的文件庫/靜態部落格

  1. 建立目錄及部署程式碼
1024,快速打造你的文件庫/靜態部落格

 編輯 package.json

package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^0.14.4"
  }
}
複製程式碼

注:

  • npm run dev 即可開始實時編輯模式
  • npm run build 即可對程式碼進行壓縮打包,打包後的資料夾在 .vuepress/dist 上。

 然後建立 docs 資料夾,並在 docs 資料夾下建立 README.md 檔案

README.md

Hello VuePress
===
複製程式碼

 最後在終端執行命令 npm run dev,並開啟 http://localhost:8080,得到初步配置介面如下:

1024,快速打造你的文件庫/靜態部落格

 值得注意的是。在這裡,我們是通過 npm run dev 即時獲取我們修改的頁面顯示。
 然後,我們可以通過 npm run build 打包我們的程式碼,你可以在 .vuepress 中找到一個 dist 資料夾,然後將 dist 中的資料夾上傳至 使用者名稱.github.io,即可完成 VuePress 的部署。

3.2.1 目錄講解

返回目錄

 在前面,我們講解了如何設定 VuePress 並啟動
 現在,我們來個基配的目錄,進行講解:

1024,快速打造你的文件庫/靜態部落格

- docs                   - VuePress 存放目錄
 - .vuepress             - VuePress 配置目錄
  - public               - 共用檔案儲存目錄
   - img                 - 共用圖片目錄
    - banner.png         - 圖片-首頁 banner
    - logo.ico           - 圖片-網站右上角小圖示
  - config.js            - VuePress 的 js 配置檔案
 - listOne               - 側邊欄專案組1
  - pageOne.md           - 專案組1頁面1
  - README.md            - 專案組1預設頁面
 - listTwo               - 側邊欄專案組2
  - pageThree.md         - 專案組2頁面3
  - pageTwo.md           - 專案組2頁面2
  - README.md            - 專案組2預設頁面
 - README.md             - 網站預設首頁
+ node_modules           - node 依賴包
- package.json           - webpack 配置檔案
複製程式碼

 其中,.vuepress 存放 VuePress 的配置目錄,public 中存放共有的檔案,config.js 為 VuePress 的配置檔案,listOnelistTwo 是側邊欄組,對頁面進行個分類。

3.2.2 導航欄

返回目錄

 在這裡,我們開始進行頂部導航欄的配置。
 首先,我們填寫下 config.js 中的配置程式碼:

config.js

module.exports = {
    // 左上角標題
    title: `jsliang 的文件庫`,
    // 描述
    description: `前端工程師 jsliang 的文件庫`,
    // 頭部部署,右上角小圖示
    head: [
        // ico 配置
        [`link`, {
            rel: `icon`,
            href: `/img/logo.ico`
        }]
    ],
    // 主題部署
    themeConfig: {
        /** 
         * 右側導航條
         * text - 顯示欄位
         * link - 連結:注意前後帶 / 符號
         */
        nav: [
            {
                text: `主頁`,
                link: `/`
            },
            /**
             * 多級選單
             * 開頭 text 為一級標題
             * 陣列內 text 為二級標題
             * link 為連結,注意帶 /
             */
            {
                text: `博文`,
                items: [
                    {
                        text: `微信小程式 bug 集中營`,
                        link: `https://github.com/LiangJunrong/document-library/blob/master/other-library/WeChatApplet/WeChatAppletBug.md`
                    },
                    {
                        text: `使用 GitHub Pages 和 VuePress 搭建網站`,
                        link: `https://github.com/LiangJunrong/document-library/blob/master/other-library/GithubPages/GithubPages.md`
                    }
                ]
            },
            {
                text: `關於`,
                link: `/about/`
            },
            // 連結到網站
            {
                text: `Github`,
                link: `https://www.github.com/LiangJunrong`
            },
        ]
    }
}
複製程式碼

 然後,啟動 npm run dev,開啟 http://localhost:8080,你可以看到導航欄部署完畢了。

1024,快速打造你的文件庫/靜態部落格

3.2.3 側邊欄

返回目錄

 VuePress 中的側邊欄配置,一共有三種方式:簡單配置,按組配置,分頁配置,有興趣的小夥伴可以去:地址 直接檢視,這裡我們單純講下我們部署我們的文件庫用到的分頁配置。

 目錄如下:

1024,快速打造你的文件庫/靜態部落格

 然後,我們修改下 config.js

config.js

module.exports = {
    title: `jsliang 的文件庫`,
    description: `前端工程師 jsliang 的文件庫`,
    head: [
        // ...省略,配置程式碼同 3.2.2    
    ],
    themeConfig: {

        nav: [
            // ...省略,配置程式碼同 3.2.2   
        ],
        /**
         * 側邊欄配置:側邊欄組
         */
        sidebar: {
            // 側邊欄在 /index/ 目錄上
            `/index/`: [
                [``, `README`],
                [`indexTwo`, `導航第二頁`]
            ],
            // 側邊欄在 /about/ 目錄上
            `/about/`: [
                [``, `README`],
                [`GithubPages`, `GithubPages`],
                [`VuePress`, `VuePress`]
            ]
        }
    }
}
複製程式碼

 最後,我們執行 npm run dev,檢視 http://localhost:8080 所示如下:

1024,快速打造你的文件庫/靜態部落格

1024,快速打造你的文件庫/靜態部落格

 可以看出,我們已經成功配置了分頁形式的側邊欄。

3.2.4 預設首頁

返回目錄

 VuePress 為我們設定了一套預設的首頁,我們直接拿來用,看看它長什麼樣子吧!

 首先,我們找一張 banner.png 圖,放到 public/img/banner.png 上。
 然後,我們修改下 docs/README.md 檔案:

docs/README.md

---
home: true
heroImage: ./img/banner.png
actionText: 皮皮蝦 我們走 →
actionLink: /index/
features:
- title: 裝逼
  details: 在這裡,你可以看到 jsliang 在這裡無限裝逼,所以你可以盡情打臉。就算你懂,沒關係,打了臉再說~
- title: 搞笑
  details: 在這裡,你可以獲得各種學習歡樂,輕鬆進擊前端程式設計。點滴進步,成就不一樣的你。
- title: 深沉
  details: 在這裡,你可以收穫一個廣州自身漂泊的人的情懷,感受在這個煩躁的社會 jsliang 如何安身立命。
footer: jsliang 的文件庫 | Copyright © 2018 不折騰的前端,和鹹魚有什麼區別
---
複製程式碼

 OK,由於我們重新修改了首頁(即 docs/README.md),所以我們重新重啟下,Ctrl+C -> y -> npm run dev,重新開啟 http://localhost:8080

1024,快速打造你的文件庫/靜態部落格

 完美!這樣,我們就完成了基礎的配置了!!!

四 VuePress 進階

4.1 修改樣式

返回目錄

 正在逐步完善。

如果你覺得該篇文章對你非常有用,請給我在 GitHub 上的文件庫一個 star,你的 star 是我不斷折騰的動力~ 【Github 地址】

知識共享許可協議
jsliang 的文件庫樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。

相關文章