Hi all!

I recently did some work on improving our documentation website. As we see,
our website now has some small disadvantages like: old fashioned design,
mobile incompatible,  lack of version control, etc. So i'm now trying to
rebuild our website with Vuepress <https://github.com/vuejs/vuepress> which
is a minimalistic Vue-powered static site generator.

Node.js environment will be needed for developing:

1. prepare node.js env.
2. cd docs && npm install
3. npm run dev
4. open the web browser and navigate to localhost:8080/en/ or
localhost:8080/zh-CN/, pages will be auto refreshed during our writing.

Then the new website will be like:

Demo: https://hffariel.github.io/

*If we decide to migrate, then some changes may be done here:*

1. For multi-language, please write markdown files in multi languages and
put them in folders './en/' and './zh-CN/'. Keep them with the same name
like:

.
├─ en/
│  ├─ one.md
│  └─ two.md
└─ zh-CN/
│  ├─ one.md
│  └─ two.md


2. The index.rst file under each doc folder will be removed, instead, the
sidebar configurations under docs/.vuepress/sidebar/*.js will be used to
declare the docs' sequence, subfolders, etc in multi-languages.

If we have directories like:

.
├─ en/
│  ├─ subfolder
│  │  ├─ one.md
│  │  └─ two.md
│  └─ three.md
└─ zh-CN/
│  ├─ subfolder
│  │  ├─ one.md
│  │  └─ two.md
│  └─ three.md

Then the sidebar configurations would be like:

// .vuepress/sidebar/en.js`
module.exports = [
  {
    title: "subfolder name",
    directoryPath: "subfolder/",
    children: ["one", "two"]
  },
  "three"
]

// .vuepress/sidebar/zh-CN.js
module.exports = [
  {
    title: "文件夹名称",
    directoryPath: "subfolder/",
    children: ["one", "two"]
  },
  "three"
]

3. Frontmatters like below should always be on the top of each file:

---{
    "title": "Backup and Recovery", // sidebar title
    "language": "en" // writing language}---

4. Assets are moved from 'docs/resources' to
'.vuepress/public/images'. Assuming
that there exists a png '.vuepress/public/images/image_x.png' , then it can
be used like:

![alter text](/images/image_x.png)

5. Markdownlint  <https://github.com/DavidAnson/markdownlint> will be used
for checking all markdown files before building the website. So we should
run 'npm lint' each time we finished writing.

Once a new PR is accepted, travis will be triggered to build the whole
document website, and push the dist folder to the asf-site branch of
incubator-doris-website <https://github.com/apache/incubator-doris-website>.

*And the travis did such things:*

1. Prepare node.js and vuepress environment.

2. Use current branch's name as the relative url path in
'.vuepress/config.js' (which is the 'base' property).

3. Build the documents into a website all by vuepress.

4. Fetch asf-site repo to local directory, and copy '.vupress/dist/' into
'{BRANCH}/'.

5. Push the new site  with GitHub Token (which is preset in Travis console
as a variable used in .travis.yml).

*For multi-version control*, we just need to edit the 'versions.js' file
under asf-site branch of incubator-doris-website
<https://github.com/apache/incubator-doris-website>.

*Everyone please feel free to discuss and give me your opinions, thx.*

Best Regards.

Reply via email to