用VuePress来搭建一个极简的静态网站
VuePress學習
全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程
假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們
全局安裝
首先我們先全局安裝一下
npm stall -g vuepress # 或者 yarn global add vuepress這里等待安裝完成后，我們在命令行輸入 vuepress或者輸入vuepress -V可以看到
vuepress Usage: vuepress <command> [options] Options:-V, --version output the version number-h, --help output usage information Commands:dev [options] [targetDir] start development serverbuild [options] [targetDir] build dir as static siteeject [targetDir] copy the default theme into .vuepress/theme for customization.Run vuepress <command> --help for detailed usage of given command. vuepress -V 0.14.8目錄結構
好，安裝成功后，我們先來了解一下vuepress的目錄結構
首先我們先新建一個項目，項目名為 “vuepress” ，然后我們進入到這個文件夾,我們在這個文件夾的空白處右鍵Git Bash Here，我們會看到一個黑底的命令工具，上面的全局安裝也是可以在這里來安裝和查看版本號的，這里不多說了，直接輸入下面的命令哈
我們先輸入一行命令，生成package.json文件
npm init -y
回車后，我們可以看到
{"name": "vpress","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC" }然后你回到vuepress文件夾內，本來是空的文件夾，現在多出來一個package.json文件
開始寫作
新建README.md文件
在命令框輸入
echo '# Hello VuePress!' > docs/README.md輸入完后，還是回到vuepress文件夾內，我們可以看到多出來一個docs的文件夾里面有一個README.md文件，打開這個文件可以看到有Hello VuePress的字樣
運行測試一下
在項目根目錄的命令行輸入
vuepress dev docsVuePress dev server listening at http://localhost:8080/我們在瀏覽器打開 http://localhost:8080/ 可以看到一個很簡潔的頁面
裝飾首頁
首頁配置
我們來編輯一下docs目錄下的README.md文件
--- home: true heroImage: /mackxin.png heroText: 馨客棧 tagline: 關注分享，關注導航，關注馨客棧 actionText: 每日更新 → actionLink: /fuli/ features: - title: 馨客棧導航details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注于寫作。 - title: 馨客棧前端導航details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。 - title: 馨客棧每日分享details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。 footer: MIT Licensed | Copyright ? 2018-present Mackxin ---我們配置完后直接到瀏覽器看效果，感覺是不是不一樣了哈
創建配置文件
在配置之前我們先要在docs文件夾下面新建一個新的文件夾，名字為 “.vuepress”，記得前面是有個點的哦，不要忘記了。然后我們進入到這個.vuepress文件夾，再在里面新建一個config.js文件，我們的導航配置文件就是在里面配置的哈
配置favorite.icon
在.vuepress文件夾下新建public文件夾，把自己制作好的icon放進去
然后我們在config.js配置文件來操作
// .vuepress/config.js module.exports = {title : 'mackxin',description : 'xininn',base: '/', // 這是部署到github相關的配置markdown: {lineNumbers: false // 代碼塊顯示行號},head : [['link',{rel:'icon',href:'/mackxin.ico'}]],sidebar: 'auto', // 側邊欄配置sidebarDepth: 2, // 側邊欄顯示2級 }現在重新執行命令yarn docs:dev 就可以看到效果了
導航配置
我們主要配置的也是config.js文件
module.exports = {title : 'mackxin',description : 'xininn',head : [['link',{rel:'icon',href:'/mackxin.ico'}]],themeConfig: {nav: [{ text: '首頁', link: '/' },{ text: '馨客棧導航', link:'http://mackxin.com/nav.html/' },{ text: '馨客棧前端導航', link:'http://mackxin.com/webnav.html/' },{ text: '馨客棧每日分享', link: 'http://mackxin.com/fx.html/' },{ text: '關于', link: '/about' },{ text: '分享', items:[{ text: '技術' , link:'/jishu/'},{ text: '每日分享' , link:'/fx/'}]},{ text: 'GitHub', link: 'https://github.com/mackxin'},// 下拉列表顯示分組{text: '學習',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等七個文件夾，我們來看看新建完的目錄結構哈
├─docs // docs目錄下 │ ├─.vuepress //文件夾的名字 │ | ├─ public //文件夾的名字 │ | ├─logo.png │ | ├─ config.js //配置文件 │ ├─js //文件夾的名字 │ ├─README.md //js首頁文件 │ ├─css //文件夾的名字 │ ├─README.md //css首頁文件 │ └─php //文件夾的名字 │ ├─README.md //php首頁文件 │ └─java //文件夾的名字 │ ├─README.md //java首頁文件 │ └─jishu //文件夾的名字 │ ├─README.md //技術首頁文件 │ └─fx //文件夾的名字 │ ├─README.md //分享首頁文件 | about.md //關于頁面 | README.md //首頁配置側邊欄配置
主要配置的也是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標題',children: ['/java/java1', // 以docs為根目錄來查找文件 '/java/java2' // 以docs為根目錄來查找文件 ]}]// 下面的是首頁顯示側邊欄的，不需要首頁顯示的話可以刪掉代碼// '/': [// '', /* / */// 'contact', /* /contact.html */// 'about' /* /about.html */// ]}} }部署
這里暫時只講部署到GitHub Pages的哈
首先我們在package.json文件里面添加代碼，如下
{"scripts": {"docs:build": "vuepress build docs","d": "bash deploy.sh"} }然后我們在vuepress文件夾下新建一個名為deploy.sh的文件，跟docs文件夾同級的哈，不要放錯地方了
如果你想發布到 https://<USERNAME>.github.io ,記得吧文件里面的<USERNAME>改成你的github的用戶名哦，不然無效的哈
#!/usr/bin/env sh# 確保腳本拋出遇到的錯誤 set -e# 生成靜態文件 npm run docs:build# 進入生成的文件夾 cd docs/.vuepress/dist# 如果是發布到自定義域名 # echo 'www.example.com' > CNAMEgit 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> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pagescd -如果你想發布到 https://<USERNAME>.github.io/<REPO> ，記得吧文件里面的<USERNAME>改成你的github的用戶名哦，還有就是把你的<REPO>改成你新建的倉庫的名字哦
這里要注意一下哦
如果你想發布到 https://<USERNAME>.github.io/<REPO>
那么你需要到config.js文件里面配置一下哦
base:'/vblog/' #!/usr/bin/env sh# 確保腳本拋出遇到的錯誤 set -e# 生成靜態文件 npm run docs:build# 進入生成的文件夾 cd docs/.vuepress/dist# 如果是發布到自定義域名 # echo 'www.example.com' > CNAMEgit 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> git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pagescd -弄好以后我們定位在 vuepress的空白處，右鍵git bash here
輸入命令
npm run d如果你看到的是下面的這樣，那就說明你成功了哈
> vpress@1.0.0 d H:\blog\vpress > bash deploy.sh> vpress@1.0.0 docs:build H:\blog\vpress > vuepress build docsWAIT 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 40sWAIT Rendering static HTML...DONE Success! Generated static files in docs\.vuepress\dist.············這里省略好多英文············create mode 100644 php/php1.htmlcreate 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現在你打開你的網站 ，我的就是 https://mackxin.github.io/vblog/
部署到自己的域名下
首先到你的個人域名的管理后天，進行解析我們來添加一下記錄
- 記錄類型我們選擇 A 類型哈
- 主機記錄，一個www 一個@
- 解析路線我們默認就好了
-
記錄值看下面我的介紹
- 我的域名是mackxin.github.io ,那么我們要獲得這個的ip的話我們就要ping一下
- 在命令行輸入：ping mackxin.github.io然后回車，稍等一下，你就可以看到你的ip值了
添加 CNAME 文件
在倉庫 mackxin.github.io 中找到 Settings > Custom domain 把 www.liweiwen.top 添加進去即可
最后，看到這里如果你還是沒有看懂的話，那么你需要看下面的視頻鏈接，希望可以幫到你順利的搭建網站，上面說的所有內容都可以在下面的視頻鏈接那里得到你想要的答案，如果看了還是不懂的話，那么你可以多看幾遍
學無止境，好好努力，奮斗吧！
想看視頻的記得點擊下面的鏈接學習哈
用VuePress來搭建一個極簡的靜態網站
總結
以上是生活随笔為你收集整理的用VuePress来搭建一个极简的静态网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS 简单实现公告消息自动逐条切换
- 下一篇： vue实战记录（二）- vue实现购物