搭建基于vuepress的静态博客程序vue-ghpages-blog

首先搭建nodejs环境。

cd /usr/local
git clone https://github.com/ymbrite/vue-ghpages-blog
cd vue-ghpages-blog

root@AR:/usr/local/vue-ghpages-blog# ls
LICENSE  README.md    jsconfig.json    package.json  src  test    webpack.config.js
root@AR:/usr/local/vue-ghpages-blog# nano src/conf.json
root@AR:/usr/local/vue-ghpages-blog# cat src/conf.json
{
  "blogTitle": "Unknow Me",
  "repo": "luckypoem/writings",
  "path": "posts",
  "branch": null,
  "favicon": null
}
(注意：上面的luckypoem/writings是指https://github.com/luckypoem/writings，它是fork自
https://github.com/viko16/writings/）
root@AR:/usr/local/vue-ghpages-blog#
root@AR:/usr/local/vue-ghpages-blog# cd src/router
root@AR:/usr/local/vue-ghpages-blog/src/router# ls
index.js
root@AR:/usr/local/vue-ghpages-blog/src/router# nano index.js
(把 倒数第3行，mode的值改为hash)
root@AR:/usr/local/vue-ghpages-blog/src/router# cd ../..
root@AR:/usr/local/vue-ghpages-blog# yarn
root@AR:/usr/local/vue-ghpages-blog# yarn build (此即生成静态网站的根目录的命令）
root@AR:/usr/local/vue-ghpages-blog# ls
LICENSE    dist          node_modules    src   webpack.config.js
README.md  jsconfig.json  package.json    test
（生成了dist目录）
root@AR:/usr/local/vue-ghpages-blog# cd dist
root@AR:/usr/local/vue-ghpages-blog/dist# ls
build.2e44d.css  build.2e44d.js  index.html
root@AR:/usr/local/vue-ghpages-blog/dist#
(可见/usr/local/vue-ghpages-blog/dist就是静态网站的根目录）

新建源帖：
访问https://github.com/luckypoem/writings，
https://github.com/luckypoem/writings/tree/master/posts，点击“create new file"按钮（需先登陆github.com),替文件命名，需命名为2017-02-18-测试2.md这样的格式，测试2.md格式是不行的。
文件的内容为：
---
title:  测试2
date: 2017-02-18
---

这是测试2.

看看如何？ 

然后，点击页面底部的“ commit new file"按钮，就完成了源帖的创建。

演示网站：https://starlit-sundae-5e5c64.netlify.app/

项目地址：https://github.com/ymbrite/vue-ghpages-blog
https://github.com/viko16/writings/
------

搭建静态博客程序vuepress-blog

cd ~

git clone https://github.com/viko16/vuepress-blog vuepress-blog-by-viko16

cd vuepress-blog-by-viko16

yarn

yarn build (此命令就是生成/更新静态网站的根目录的命令。它会在当前目录下，生成dist目录）

新建源帖：

cd posts

nano happy-festival.md

cat happy-festival.md

显示：

---

title: 快乐的节日

date: 2024-10-28 19:06:00

---

此处写正文或html codes。

cd ..

yarn build

演示网站：https://chic-monstera-02402d.netlify.app/

项目地址：https://github.com/viko16/vuepress-blog

(https://github.com/ymbrite/vuepress-blog)

--------------------------------------------------------------------

 

$ npx create-vuepress-site vp-site
cd vp-site/docs
yarn
yarn build
显示：
....
success. Generated static files in src\.vuepress\dist.
$ find . -name index.html
显示：
...
./src/.vuepress/dist/index.html 

 项目地址：

https://github.com/vuepress/create-vuepress-site

----------------------------- ------------------------------------

 

 git clone https://github.com/xugaoyi/vuepress-theme-vdoing
cd vuepress-theme-vdoing
npm install （或yarn)
npm run build:win  (或yarn build:win)
(windows系统下，必须运行npm run build:win而非npm run build，否则build将失败）
$ find . -name index.html
显示：
...
./docs/.vuepress/dist/index.html
...
可见~/vuepress-theme-vdoing/docs/.vuepress/dist/ 就是静态网站的根目录。

新建源帖：
cd ~/vuepress-theme-vdoing/docs/_posts/随笔
nano hf.md

cat hf.md

显示：

---
title: 快乐的节日
date: 2024-10-31 16:56:00
sidebar: auto
categories:
  - 随笔
---

此处写正文或html codes.

 

$ cd ~/vuepress-theme-vdoing/

$ yarn build:win

演示网站：https://extraordinary-raindrop-f2ea79.netlify.app/ ,https://xugaoyi.com/

 项目地址：https://github.com/xugaoyi/vuepress-theme-vdoing

------------------------------------------------------------------------------

 

$ npm install @vuepress-reco/theme-cli -g
$ theme-cli init vtr-site (会在当前目录下,生成vtr-site目录）
cd vtr-site

12799@DESKTOP-B6LK9IO MINGW64 ~/vtr-site
$ ls
README.md  blogs/  docs/  package.json

12799@DESKTOP-B6LK9IO MINGW64 ~/vtr-site
$ pnpm install
$ pnpm build
显示：
...
success Generated static files in public.

新建源帖：
cd blogs
cd other
nano hf.md
cat hf.md
显示：
---
title: 快乐的节日
date: 2024-11-03T22:16:00
---

此处写正文或html codes.

cd ../..
$ pnpm build

演示网站：https://loquacious-brigadeiros-10ee7d.netlify.app/
项目地址：https://github.com/vuepress-reco/vuepress-theme-reco  
----------------------------------------------------------------------------------

 

cd ~
git clone https://github.com/vuepress/vuepress-theme-blog
cd vuepress-theme-blog
pnpm install
pnpm docs:build
显示：
...
success Generated static files in docs\.vuepress\dist.
$ cd docs/.vuepress/dist
$ python3 -m http.server 1234
按ctrl+c

$ cd ~/vuepress-theme-blog
$ pnpm example:build
显示：
...
success Generated static files in example\.vuepress\dist.
$ cd example/.vuepress/dist
$ python3 -m http.server 1234
按ctrl+c
$ cd ~/vuepress-theme-blog/
$ cd example
$ ls
_posts/  about.md
$ cd posts
$ nano 2024-11-03-happy-festival.md
$ cat 2024-11-03-happy-festival.md
显示：
---
title: 快乐的节日
date: 2024-11-03T23:37:00
tags:
  - life
  - music
---

此处写正文或html codes.

$ cd ~/vuepress-theme-blog/
$ pnpm example:build
显示：
success Generated static files in example\.vuepress\dist.

演示网站：https://iridescent-monstera-757f3b.netlify.app/
项目地址：https://github.com/vuepress/vuepress-theme-blog
--------------------------------------------------------------------------

 

 cd ~
git clone https://github.com/meteorlxy/vuepress-theme-meteorlxy
cd vuepress-theme-meteorlxy
pnpm install
pnpm build
显示：
success Generated static files in docs-dist.
cd docs-dist
python -m http.server 1234

新建源帖：
cd ../docs/_posts

$ nano 2024-11-04-hf.md

$ cat 2024-11-04-hf.md 

显示：

---
top: 1
category: docs
tags:
  - music
  - life
date: 2024-11-04 11:27:00
title: 快乐的节日
vssue-id: 11
---

此处写正文或html codes.

 

$ cd ../..

$ pnpm build 

演示网站：https://darling-starburst-feb557.netlify.app/

https://vuepress-theme-meteorlxy.meteorlxy.cn/,可以分页

项目地址：https://github.com/meteorlxy/vuepress-theme-meteorlxy

--------------------------------------------------------------------

 https://github.com/viko16/vuepress-theme-simple
https://vuepress.vuejs.org/， https://vuepress.vuejs.org/zh/

https://github.com/vuejs/vuepress

https://github.com/vuepress/awesome-vuepress

https://github.com/vuepress/core

https://github.com/vuepress-reco/vuepress-reco.github.io

(https://vuepress-theme-reco.recoluan.com/)

https://github.com/forestryio/portfolio-vuepress

https://github.com/PanJiaChen/vue-element-admin-site

 

相关帖子：https://briteming.blogspot.com/2020/04/vuepress.html