Blogging with Vuepress Theme

Let's create a development blog with the Vuepress Hope theme.

pnpm create vuepress-theme-hope [dir]

yarn create vuepress-theme-hope [dir]

npm init vuepress-theme-hope [dir]

• In [dir], you must put the name of the actual folder you want to create.

language
package manager
Project Name
Project version
Project description
license
multiple languages
github workflow
type of project
initialize repo

• You have to make about 10 choices.

When the project is created, go to the GitHub homepage and create a github public repo with the name username.github.io. Don't touch anything, just write the repo name and create it.

Edit Permissions

Create a repo, go to Settings tab => Actions => General, change the Workflow permissions option to Read and write permissions and click Save.

deploy-docs.yml

vuepress hope provides a github actions template by default.

# deploy-docs.yml
- name: Install pnpm
  uses: pnpm/action-setup@v2
  with:
    run_install: true

There is something called Install pnpm in the middle, and you need to put the version as follows.

# deploy-docs.yml
- name: Install pnpm
  uses: pnpm/action-setup@v2
  with:
    version: 8
    run_install: true

Before uploading the source to Git, let's test the build.

pnpm run docs:build

yarn docs:build

npm run docs:build

When 'useXXX() is called without provider' error occurs

An error occurs when there is a version of the library that is not compatible with vuepress.
vp-update will automatically set the version to a version compatible with vuepress.

$ pnpm dlx vp-update

$ yarn dlx vp-update

$ npx vp-update

If the build was successful, let's upload the source to the Git repository.

I will open a terminal in the project created with vuepress and upload the source by connecting to the git repository.

$ git init
$ git remote add origin [url]
$ git branch -m master main
$ git add .
$ git commit -m "message"
$ git push

Branch error

If you get a branch error in git push, please enter the following command.

$ git push --set-upstream origin main

If you have uploaded everything up to this point in the git repo, a new branch called gh-pages should have been created if you did not modify the .yml file separately during the build.

This time, I will go to Settings tab => Pages and change Branch to gh-pages in Build and deployment and Save.

After waiting for a while, go to username.github.io and you will see a pretty home page. If it is not uploaded to the home page, please push it to the Git repository once more.