A Notebook

# Journey of Starting VuePress

https://vue.pquan.info (opens new window)

It's not quite an easy step for a newcomer ! (note below is written in Vietnamese)

# NodeJs:

https://nodejs.org/en/download/ (opens new window)

Chọn LTS thay vì Latest vì LTS tương thích hơn với VuePress. Nếu không có thể gặp lỗi về webpack. Hoặc có thể dùng nvm để chuyển qua lại các phiên bản. Như ở đây (opens new window) hay ở đây: https://github.com/coreybutler/nvm-windows#installation--upgrades (opens new window)

Tôi đang dùng Atom, tải tại https://atom.io (opens new window) để soạn thảo. Khá tốt! Trước tiên là miễn phí cái đã, không như Sublime Text có trả phí. Có thể chia hai cột, cột md code còn cột còn lại hiển thị Preview.

Tôi cũng dùng cmder (opens new window) để làm CLI thực thi các dòng lệnh cài đặt, build và git.

# VuePress:

# Các Lệnh để chạy

Bunch of Code 1:

mkdir C:\VuePress
cd VuePress
npm init
npm install --save vuepress

Sau đó thêm vào scripts của package.json mới được tạo để chạy hai lệnh dev và build.

Bunch of Code 2:

{
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "cname": "cp ./cname ./docs/cname"
    }
}

Bunch of Code 3:

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

Trong Github, tại Settings, mục Pages, chọn Source là /docs và branch là master.

Nhớ copy CNAME file vào docs sau mỗi lần build.

Bunch of Code 4:

npm run build
npm run dev
npm run cname

Cài Github For Desktop để tạo repository, commit to master, push or pull to repository.

khi chạy dev để kiểm tra thì:

VuePress dev server listening at http://localhost:8080/

Lưu ý:

  • Trước tiên file .md nên dùng dấu (-) thay vì (_). Nếu không, có thể sót Posts khi run build
  • Nhớ copy CNAME vào docs nếu dùng Custom DNS/ sub domain.
  • Để có ảnh trong thư mục /assets/img thì bỏ ảnh vào trong /.vuepress/public. Khi đó:
home: true
heroImage: picture.jpg
actionText: Notebook ->
actionLink: /_posts/note1.md
  • Làm khác như trên thì ảnh không hiện ra. Đó còn tuỳ vào custom theme.
  • Các ảnh minh hoạ riêng của từng bài viết thì bỏ vào các thư mục riêng cho từng bài viết đó, ví dụ như: /posts/post1/anh1_1.png. Xem thêm ở đây (opens new window) để xử lý lỗi nếu có.

# Config Git

Tạo file .gitignore và thêm vào:

node_modules

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

Mục đích nhằm để git bỏ qua thư mục không cần thiết để commit.

# Cấu trúc thư mục:

├── blog_folder
│   ├── .vuepress
│   │   ├── components
│   │   ├── theme (Optional)
│   │   │   └── Layout.vue
│   │   ├── public
│   │   ├── styles (Optional)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (Optional, Danger Zone)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (Optional)
│   │   └── enhanceApp.js (Optional)
│   │
│   ├── README.md
│   ├── posts
│   │   ├── post1.md
│   │   ├── post2.md
│   │   ├── post1    (put pictures for post 1 in here)           
│   │   ├── post2    (put pictures for post 2 in here)
│   │   └── ...
│   │
│   ├── about
│   │    └── README.md
│   └── package.json
│
└──

# Tập tin config.js

module.exports  =  {
  title: 'My Vue Notebook',
  description: 'thử dùng VuePress',
//  base: '/foxdie/',  // không cần khai base: nếu dùng domain khác.(theo github)
  dest: 'docs',
  locales:  {
    '/vi':  {
      lang:  'vi-VN',
      title:  'pquan.info',
      description:  'Mô tả tiếng việt'
    },
    '/en':  {
      lang:  'en-VN',
      title:  'pquan.info',
      description:  'Mô tả tiếng anh'
    }
  },
  themeConfig: {
      sidebar: 'auto', // Luôn hiển thị sidebar trong bài viết
      // Thiết lập các liên kế trên navbar
      nav: [
        { text: 'Trang Chủ', link: '/' },
        { text: 'Giới Thiệu', link: '/about/' },
        { text: 'PQUAN', link: 'https://pquan.info' },
      ],
    }
}

# Vue components

// .vuepress/components/all-posts.vue
<template>
  <div>
    <p v-for="post in $site.pages.filter(p => p.path.includes('/posts'))">
      <router-link :to="post.path">{{ post.title }}</router-link>
    </p>
  </div>
</template>

# README.md có dạng:

---
home: true
heroImage: picture.jpg
actionText: Notebook ->
actionLink: /_posts/note1.md
---

# [ All Posts ]

<all-posts/>

# Vấn đề còn gặp:

  1. Do CloudFlare DNS hay Github (?) khi refresh 1 trang sẽ gây lỗi 404 - không tìm thấy trang. (?)

Workaround:

==> Chuyển sang server của Vercel thì đã hết lỗi này. Good job!

  1. Các công thức toán không render được, tự xuất sang mã HTML bình thường.

==> Chuyển sang server của Vercel thì đã khắc phục được lỗi, do trang Github không load được file js hay sao đó, cần tìm hiểu thêm.

  1. Lỗi "too many redirect" khi dùng CloudFlare

https://vercel.com/support/articles/resolve-err-too-many-redirects-when-using-cloudflare-proxy-with-vercel (opens new window) ==> solved.

Tuy nhiên bật đám mây vàng (dùng CloudFlare Proxy (opens new window)) có còn gây lỗi ?

  1. Đọc lại note1 (opens new window) để xem các cập nhật gặp lỗi mới khi build và cách khắc phục nếu có thể.

# Phát triển:

  • Cài đặt một custom theme, sửa một theme trên Github. --> dùng Hugo (opens new window)
  • Tạo một button chuyển nhanh về đầu trang.
  • Tạo mục lục bài viết.
  • Học thêm về Vue.Js, JavaScript.
  • Encrypt một bài viết mang tính riêng tư. (Have tried, but can't make it work) -> đã làm xong
  • Chờ khi V2 của VuePress (opens new window) stable rồi nâng cấp luôn thể. Tạm thời cứ tạm chấp nhận V1 😄 ❤️

... v.v ...

← Python →