vuepress是vue提供的乙個文件頁生成工具,雖然官方還沒有實現部落格適配,但是現在可以通過一些小配置檔案的修改,作為乙個自己的部落格生成工具
為了建立部落格,我們需要乙個存放部落格頁的地方,最理想的還是github啦
雖然現在github為每個倉庫都提供了github pages服務,不過我們還是需要github提供的耳機線網域名稱,所以
建立乙個repository這個repository的名字還有要求必須是《你的使用者名稱》.github.io
,像我就是mizuka-wu.github.io
申請網域名稱和繫結ssl在倉庫的settings中custom domain中可以填寫自己的網域名稱,當然直接在專案目錄下建立cname檔案填寫自己的網域名稱也可以,ssl可以使用certbot自主申請三個月的(三個月續期就可以無限使用了)
為什麼使用?主要我覺得。。預設主題比較好看吧基本環境搭建(npm)
npm init(建立個package.json)
建立blog資料夾(不用vuepress使用的doc因為我們不是建立文件)
vuepress配置
vuepress生成依賴於.vuepress 當然使用預設配置也可以我們最終是用vuepress構建我們寫好的md檔案,由於github.io相當於乙個靜態資源伺服器,所以路徑就變得很重要了, 所以配置上我們基本就是將本身的build路徑改為根目錄下的/post/ 然後將index.html這一類的資源構建完成後放入到根目錄下
const basepath = 'post'
module.exports = /`,
serviceworker: true,
evergreen: true,
ga: 'ua-112738831-1'
}複製**
"scripts": ,
複製**
推薦乙個node可以使用es module的方案esm
/**
* build blog
* @author mizuka */
import spawn from
'cross-spawn'
import from
'fs'
import config from
'./blog/.vuepress/config'
const builder = spawn('vuepress', ['build', 'blog'])
builder.stdout.on('data', function (s) )
builder.stdout.on('end', function ()
console.log('copy /post/index.html to /')
})}})
複製**
剩下的只是在blog下按照自己的喜好編寫markdown檔案就好啦,構建完畢發布到github上看看唄
vuepress官方提供了乙個主頁生成的語法 這裡說一下怎麼顯示所有的文件
vuepress支援在markdown中寫vue!
vuepress提供了很多資訊,比如$site.pages
在blog/readme.md下增加一段vue**
# 所有文章
"display: flex; flex-direction: column">
"page of $site.pages.filter(item => item.path !== '/')" :key="page.key" style="padding: 20px 0; max-width: 33%;">
"page.path">
}"color: #c2c5cd; font-size: .5rem;">}
複製**
用最快的速度學會Git的運用
隨著寫的 越多會發現,很多小小的短的 會慢慢的被遺忘。雖說不是很高深的 但是感覺平時敲得 一次不小心刪掉了,感覺挺可惜的,而git可以很好地解決這一問題。配置git身份資訊 git config global user.name abc git config global user.email ab...
用Java實現最快速度的陣列交集
演算法 一 暴力破解法,遍歷兩個陣列,比較值。借用第三個陣列來裝載相同的值。時間複雜度為o n public static int intersect int arr1,int arr2 else int n newint n int k 0 for int i 0 i n arrays.copyo...
電腦鍵盤打字手法 手機打字用什麼方法最快?
極客談科技 全新視角 全新思路,伴您遨遊神奇的科技世界。看到這個問題,不禁令我想到了黑莓手機,離我們遠去的全鍵盤手機 實體鍵盤能夠提供的極致觸感是螢幕所無法取代的 無論是電腦端,還是手機端,如何在確保準確率的前提下,快速完成打字輸出將會提公升我們的辦事效率。這裡將會從輸入法的選擇 輸入操作建議 特殊...