用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

BetaRabbit 發(fā)布于2019-08-30 15:55 / 2984人閱讀

摘要：馨客棧前端導(dǎo)航享受的開(kāi)發(fā)體驗(yàn)，在中使用組件，同時(shí)可以使用來(lái)開(kāi)發(fā)自定義主題。馨客棧每日分享為每個(gè)頁(yè)面預(yù)渲染生成靜態(tài)的，同時(shí)在頁(yè)面被加載的時(shí)候，將作為運(yùn)行。

VuePress學(xué)習(xí)

全局安裝前我們需要Git和node這兩個(gè)軟件，關(guān)于怎么安裝可以我之前hexo的視頻教程

假如這兩個(gè)都沒(méi)有安裝好，那么下面就不需要看了哈，棧友們

全局安裝

首先我們先全局安裝一下

npm stall -g vuepress    # 或者  yarn global add vuepress

這里等待安裝完成后，我們?cè)诿钚休斎?vuepress或者輸入vuepress -V可以看到

vuepress
Usage: vuepress  [options]
Options:
  -V, --version                output the version number
  -h, --help                   output usage information
Commands:
  dev [options] [targetDir]    start development server
  build [options] [targetDir]  build dir as static site
  eject [targetDir]            copy the default theme into .vuepress/theme for customization.
  Run vuepress  --help for detailed usage of given command.

vuepress -V
0.14.8

目錄結(jié)構(gòu)

好，安裝成功后，我們先來(lái)了解一下vuepress的目錄結(jié)構(gòu)

首先我們先新建一個(gè)項(xiàng)目，項(xiàng)目名為 “vuepress” ，然后我們進(jìn)入到這個(gè)文件夾,我們?cè)谶@個(gè)文件夾的空白處右鍵Git Bash Here，我們會(huì)看到一個(gè)黑底的命令工具，上面的全局安裝也是可以在這里來(lái)安裝和查看版本號(hào)的，這里不多說(shuō)了，直接輸入下面的命令哈

我們先輸入一行命令，生成package.json文件

npm init -y

回車(chē)后，我們可以看到

{
  "name": "vpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后你回到vuepress文件夾內(nèi)，本來(lái)是空的文件夾，現(xiàn)在多出來(lái)一個(gè)package.json文件

開(kāi)始寫(xiě)作 新建README.md文件

在命令框輸入

echo "# Hello VuePress!" > docs/README.md

輸入完后，還是回到vuepress文件夾內(nèi)，我們可以看到多出來(lái)一個(gè)docs的文件夾里面有一個(gè)README.md文件，打開(kāi)這個(gè)文件可以看到有Hello VuePress的字樣

運(yùn)行測(cè)試一下

在項(xiàng)目根目錄的命令行輸入

vuepress dev docs

 VuePress dev server listening at http://localhost:8080/

我們?cè)跒g覽器打開(kāi) http://localhost:8080/ 可以看到一個(gè)很簡(jiǎn)潔的頁(yè)面

裝飾首頁(yè) 首頁(yè)配置

我們來(lái)編輯一下docs目錄下的README.md文件

---
home: true
heroImage: /mackxin.png
heroText: 馨客棧
tagline: 關(guān)注分享，關(guān)注導(dǎo)航，關(guān)注馨客棧
actionText: 每日更新 →
actionLink: /fuli/
features:
- title: 馨客棧導(dǎo)航
  details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專注于寫(xiě)作。
- title: 馨客棧前端導(dǎo)航
  details: 享受 Vue + webpack 的開(kāi)發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來(lái)開(kāi)發(fā)自定義主題。
- title: 馨客棧每日分享
  details: VuePress 為每個(gè)頁(yè)面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁(yè)面被加載的時(shí)候，將作為 SPA 運(yùn)行。
footer: MIT Licensed | Copyright ? 2018-present Mackxin
---

我們配置完后直接到瀏覽器看效果，感覺(jué)是不是不一樣了哈

創(chuàng)建配置文件

在配置之前我們先要在docs文件夾下面新建一個(gè)新的文件夾，名字為 “.vuepress”，記得前面是有個(gè)點(diǎn)的哦，不要忘記了。然后我們進(jìn)入到這個(gè).vuepress文件夾，再在里面新建一個(gè)config.js文件，我們的導(dǎo)航配置文件就是在里面配置的哈

配置favorite.icon

在.vuepress文件夾下新建public文件夾，把自己制作好的icon放進(jìn)去

然后我們?cè)赾onfig.js配置文件來(lái)操作

// .vuepress/config.js
module.exports = {
    title : "mackxin",
    description : "xininn",
    base: "/", // 這是部署到github相關(guān)的配置
    markdown: {
        lineNumbers: false // 代碼塊顯示行號(hào)
    },
    head : [
        ["link",{rel:"icon",href:"/mackxin.ico"}]
    ],
    sidebar: "auto", // 側(cè)邊欄配置
    sidebarDepth: 2, // 側(cè)邊欄顯示2級(jí)
}

現(xiàn)在重新執(zhí)行命令yarn docs:dev 就可以看到效果了

導(dǎo)航配置

我們主要配置的也是config.js文件

module.exports = {
    title : "mackxin",
    description : "xininn",
    head : [
        ["link",{rel:"icon",href:"/mackxin.ico"}]
    ],
    themeConfig: {
        nav: [
            { text: "首頁(yè)", link: "/" },
            { text: "馨客棧導(dǎo)航", link:"http://mackxin.com/nav.html/" },
            { text: "馨客棧前端導(dǎo)航", link:"http://mackxin.com/webnav.html/" },
            { text: "馨客棧每日分享", link: "http://mackxin.com/fx.html/" },
            { text: "關(guān)于", link: "/about" },
            { 
               text: "分享", 
               items:[
                 { text: "技術(shù)" , link:"/jishu/"},
                 { text: "每日分享" , link:"/fx/"}
               ]
            },
            { text: "GitHub", link: "https://github.com/mackxin"},
            // 下拉列表顯示分組
            {
                text: "學(xué)習(xí)",
                items: [
                { 
                    text: "前端", 
                    items: [
                    { text: "js", link: "/js/" },
                    { text: "css", link: "/css/" }
                    ] 
                },
                { 
                    text: "后端", 
                    items: [
                    { text: "php", link: "/php/" },
                    { text: "java", link: "/java/"},
                    ] 
                },
                ]
            }
        ],
        sidebarDepth: 2,
        lastUpdated: "Last Updated"
      }
}

這里我們要新建about、js、css、php、java、jishu、fx等七個(gè)文件夾，我們來(lái)看看新建完的目錄結(jié)構(gòu)哈

├─docs     // docs目錄下
│ ├─.vuepress     //文件夾的名字
│ |    ├─ public   //文件夾的名字
│ |          ├─logo.png
│ |    ├─ config.js   //配置文件
│ ├─js     //文件夾的名字
│    ├─README.md    //js首頁(yè)文件
│ ├─css    //文件夾的名字
│    ├─README.md    //css首頁(yè)文件
│ └─php    //文件夾的名字
│    ├─README.md    //php首頁(yè)文件
│ └─java   //文件夾的名字
│    ├─README.md    //java首頁(yè)文件
│ └─jishu  //文件夾的名字
│    ├─README.md    //技術(shù)首頁(yè)文件
│ └─fx     //文件夾的名字
│    ├─README.md    //分享首頁(yè)文件
| about.md    //關(guān)于頁(yè)面
| README.md  //首頁(yè)配置

側(cè)邊欄配置

主要配置的也是config.js文件

// .vuepress/config.js
module.exports = {
    themeConfig: {
        sidebar: {
            "/fx/": [
                "",     
                "fx1", 
                "fx2"  
            ],
            "/js/": [
                "",     
                "js1", 
                "js2"
            ],
            "/css/": [
                "",     
                "css1", 
                "css2"
            ],
            "/php/": [
                "",     
                "php1", 
                "php2"
            ],
            "/java/": [
                "/java/", // JAVA文件夾的README.md 不是下拉框形式
                {
                  title: "java標(biāo)題",
                  children: [
                    "/java/java1", // 以docs為根目錄來(lái)查找文件 
                    "/java/java2"  // 以docs為根目錄來(lái)查找文件 
                  ]
                }
            ]
            // 下面的是首頁(yè)顯示側(cè)邊欄的，不需要首頁(yè)顯示的話可以刪掉代碼
            // "/": [
            //     "",        /* / */
            //     "contact", /* /contact.html */
            //     "about"    /* /about.html */
            // ]
        }
    }
}

部署

這里暫時(shí)只講部署到GitHub Pages的哈

首先我們?cè)趐ackage.json文件里面添加代碼，如下

{
  "scripts": {
    "docs:build": "vuepress build docs",
    "d": "bash deploy.sh"
  }
}

然后我們?cè)趘uepress文件夾下新建一個(gè)名為deploy.sh的文件，跟docs文件夾同級(jí)的哈，不要放錯(cuò)地方了

如果你想發(fā)布到 https://.github.io ,記得吧文件里面的改成你的github的用戶名哦，不然無(wú)效的哈

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo "www.example.com" > CNAME

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

# 如果發(fā)布到 https://.github.io
git push -f git@github.com:/.github.io.git master

# 如果發(fā)布到 https://.github.io/
# git push -f git@github.com:/.git master:gh-pages

cd -

如果你想發(fā)布到 https://.github.io/ ，記得吧文件里面的改成你的github的用戶名哦，還有就是把你的改成你新建的倉(cāng)庫(kù)的名字哦

這里要注意一下哦

如果你想發(fā)布到 https://.github.io/

那么你需要到config.js文件里面配置一下哦

base:"/vblog/"

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo "www.example.com" > CNAME

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

# 如果發(fā)布到 https://.github.io
# git push -f git@github.com:/.github.io.git master

# 如果發(fā)布到 https://.github.io/
git push -f git@github.com:/.git master:gh-pages

cd -

弄好以后我們定位在 vuepress的空白處，右鍵git bash here

輸入命令

npm run d

如果你看到的是下面的這樣，那就說(shuō)明你成功了哈

> vpress@1.0.0 d H:logvpress
> bash deploy.sh

> vpress@1.0.0 docs:build H:logvpress
> vuepress build docs

 WAIT  Extracting site metadata...
[15:53:56] Compiling Client
[15:53:56] Compiling Server
[15:54:35] Compiled Server in 39s
[15:54:36] Compiled Client in 40s
 WAIT  Rendering static HTML...

 DONE  Success! Generated static files in docs.vuepressdist.
 ······
 ······
 這里省略好多英文
 ······
 ······
  create mode 100644 php/php1.html
 create mode 100644 php/php2.html
Enumerating objects: 56, done.
Counting objects: 100% (56/56), done.
Delta compression using up to 2 threads
Compressing objects: 100% (53/53), done.
Writing objects: 100% (56/56), 83.58 KiB | 950.00 KiB/s, done.
Total 56 (delta 30), reused 0 (delta 0)
remote: Resolving deltas: 100% (30/30), done.
To github.com:mackxin/vblog.git
 * [new branch]      master -> gh-pages

現(xiàn)在你打開(kāi)你的網(wǎng)站，我的就是 https://mackxin.github.io/vblog/

部署到自己的域名下

首先到你的個(gè)人域名的管理后天，進(jìn)行解析我們來(lái)添加一下記錄

記錄類型我們選擇 A 類型哈

主機(jī)記錄，一個(gè)www 一個(gè)@

解析路線我們默認(rèn)就好了

記錄值看下面我的介紹

我的域名是mackxin.github.io ,那么我們要獲得這個(gè)的ip的話我們就要ping一下

在命令行輸入：ping mackxin.github.io然后回車(chē)，稍等一下，你就可以看到你的ip值了

Ping mackxin.github.io [185.199.110.153]
這里我們需要的值就是185.199.110.153了

添加 CNAME 文件

在倉(cāng)庫(kù) mackxin.github.io 中找到 Settings > Custom domain 把 www.liweiwen.top 添加進(jìn)去即可

最后，看到這里如果你還是沒(méi)有看懂的話，那么你需要看下面的視頻鏈接，希望可以幫到你順利的搭建網(wǎng)站，上面說(shuō)的所有內(nèi)容都可以在下面的視頻鏈接那里得到你想要的答案，如果看了還是不懂的話，那么你可以多看幾遍

學(xué)無(wú)止境，好好努力，奮斗吧！

想看視頻的記得點(diǎn)擊下面的鏈接學(xué)習(xí)哈

用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

云服務(wù)器 GPU云服務(wù)器基于存儲(chǔ)搭建靜態(tài)網(wǎng)站用阿里云搭建一個(gè)文件服務(wù)器搭建一個(gè)網(wǎng)站如何搭建一個(gè)網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117307.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BetaRabbit

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow筆記

閱讀 540·2023-04-26 01:39
（Anaconda）ImportError: DLL load failed while impor

閱讀 4503·2021-11-16 11:45
5G 驅(qū)動(dòng)的數(shù)字化轉(zhuǎn)型場(chǎng)景

閱讀 2616·2021-09-27 13:37
阿里云優(yōu)惠：香港輕量應(yīng)用服務(wù)器2核1G僅288元/年;國(guó)內(nèi)ECS共享型n4 1核2G僅72.6元/年

閱讀 886·2021-09-01 10:50
整理NameCheap域名優(yōu)惠碼促銷(xiāo)活動(dòng)（包含SSL證書(shū)和企業(yè)郵局和虛擬主機(jī)等）

閱讀 3594·2021-08-16 10:50
如何讓文本只顯示兩行——塊級(jí)文字省略

閱讀 2222·2019-08-30 15:55
用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

閱讀 2985·2019-08-30 15:55
微信小程序?qū)W習(xí)簡(jiǎn)介

閱讀 2262·2019-08-30 14:07

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

相關(guān)文章