Note 1

For starters

https://nodejs.org/en/docsopen in new window

https://nodejs.org/en/docs/guides/getting-started-guideopen in new window

Install tools and configuration manually: (after install NodeJs)

https://github.com/nodejs/node-gyp#on-windowsopen in new window

https://topdev.vn/blog/npm-la-gi/">https://topdev.vn/blog/npm-la-gi/open in new window

https://hexo.io/themesopen in new window

found 0 vulnerabilities
npm notice
npm notice New patch version of npm available! 8.1.0 -> 8.1.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.1
npm notice Run npm install -g [email protected] to update!
npm notice

1
2
3
4
5
6

wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 15.75s

√ Server
  Compiled successfully in 8.93s

wait Rendering static HTML...
success Generated static files in docs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

cd C:\VuePress
git init
git add -A
git commit -m 'deploy'

1
2
3
4

VuePress Resources:

A curated list of awesome things related to VuePress: https://github.com/vuepress/awesome-vuepressopen in new window

https://github.com/vuepress/awesome-vuepress#themesopen in new window

https://vuepress.vuejs.org/guide/getting-started.html#prerequisitesopen in new window

https://ehkoo.com/bai-viet/static-web-vuepress-github-pagesopen in new window

https://blog.howar31.com/vuepress-blog-tutorial/#so-why-vuepress-and-gitlab-pagesopen in new window

You can use this component in a header to add some status for an API:

### Badge <Badge text="beta" type="warning"/> <Badge text="default theme"/>

type - string, optional value: "tip"|"warning"|"error", defaults to "tip".

color name's cheat sheet: https://htmlcolorcodes.com/color-names/open in new window

https://vuepress.vuejs.org/theme/default-theme-config.html#navbar-logoopen in new window

MathJax support:

https://vuepress-community.netlify.app/en/plugins/mathjax/#installationopen in new window

Prev/Next Links:

You can also explicitly overwrite or disable them for individual pages with YAML front matter:

---
prev: ./some-other-page
next: false
---

1
2
3
4

APlayer:

themeConfig: {
//  other stuff...
      plugins: [
                [
                  'vuepress-plugin-mathjax',
                  {
                    target: 'svg',
                    macros: {
                      '*': '\\times',
                    },
                  },
                ], ['aplayer'],
            //  other stuff...    
                  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

More commands and options: aplayer.js.orgopen in new window

External js Code

https://coderedirect.com/questions/53896/how-to-add-external-js-scripts-to-vuejs-components

https://titanwolf.org/Network/Articles/Article?AID=1fa12010-da8c-4df5-86af-19ab0bbcb3df

https://stackoverflow.com/questions/52836660/how-to-add-jquery-into-a-vuepress-file <===

https://github.com/vuejs/vuepress/issues/790

Darkmode

Install this plugin:

https://tolking.github.io/vuepress-theme-default-prefers-color-schemeopen in new window

VuePress Themes:

vuepress-theme-hope: like default theme, but much more built-in feature: https://vuepress-theme-hope.github.io/FAQ/open in new window
A simple and efficient VuePress knowledge management: https://github.com/xugaoyi/vuepress-theme-vdoingopen in new window
A nice vuepress blog theme: https://github.com/yuicer/vuepress-theme-yuiceropen in new window

Theme-hope

(experimental)

👉 https://vuepress-theme-hope.github.io/basic/tutorial/open in new window


nvm list

nvm install 16.13.0

nvm use 16.13.0

npm i -g yarn

cd C:\ProjectVue

yarn config set registry https://registry.npm.taobao.org

yarn create vuepress-theme-hope docs

yarn run docs:dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Note: shouldn't use Yarn 2 because of https://github.com/yarnpkg/berry/issues/543open in new window. Read more hereopen in new window

VuePress Video:

Video display example:

<video width="560" height="240" controls>
  <source src="https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_1mb.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

1
2
3
4

WebM format:

<video width="754" height="446" controls>
  <source src="https://files.abc.xyz/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

1
2
3
4

Issues:

https://github.com/vuejs/vuepress/issues/1935

See: https://vuepress.vuejs.org/guide/deploy.html#github-pagesopen in new window

For example, I use base: "/course-material/" ok, and that works for me.

=> not neccessary anymore if you custom domain like https://vue.pquan.infoopen in new window

Weird encounter but solved by change the name of post's picture folder by something shorter and is not same name as post's name, log provided for future reference:

(undefined) ./abcd/xyz.md?vue&type=template&id=37f20fd6& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/@vuepress/core/node_modules/.cache/vuepress","cacheIdentifier":"4b61893c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??ref--1-1!./node_modules/@vuepress/markdown-loader??ref--1-2!./draft/concrete1.md?vue&type=template&id=37f20fd6&)
03:29:16.854	Module not found: Error: Can't resolve /abcd/xyz.

1
2

CNAME

And furthermore, about CNAME and DNS: [https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/troubleshooting-custom-domains-and-github-pages#cname-errors](CNAME error)

also, every vuepress build destroys CNAME in docs folder.

[https://stackoverflow.com/questions/58287673/vuepress-build-deletes-cname-file-in-docs-needed-for-github-pages-custom-domain](Possible fix?)

Hero Image

The Hero image must go in the public directory (for default theme)

The default theme looks for its hero image not in the /assets/img directory but in the /.vuepress/public directory.

Add the YAML line heroImage: /banner.png. The default theme looks for its hero image the public directory, which is found in /.vuepress/public. The next thing to add is the directive heroText: ...

GO TO: [ note2 ]

# Note 1

# For starters

# VuePress Resources:

# Add Logo to nav bar:

# MathJax support:

# Prev/Next Links:

# APlayer:

# External js Code

# Darkmode

# VuePress Themes:

# Theme-hope

# VuePress Video:

# Issues:

# CNAME

# Hero Image

Note 1

For starters

VuePress Resources:

Add Logo to nav bar:

MathJax support:

Prev/Next Links:

APlayer:

External js Code

Darkmode

VuePress Themes:

Theme-hope

VuePress Video:

Issues:

CNAME

Hero Image