Currently, web applications are one of the tools to help people easily access information and share content to a large community. Because of its convenience, everyone wants to create a website to share, build a profile and portfolio for themselves, and the approach to building a website is even easier. In this series, I want to share with everyone the tools, guide people to create a website, a blog for themselves.
I will start with the first tool, which is VuePress .
About VuePress
VuePress was created to build static web pages or used to build a website to put documentation on it. To build a website with VuePress, you only need a little knowledge of Markdown so it is enough. Markdown is used to write content for the website, each Markdown file will be compiled by VuePress into HTML, users will have direct access to the HTML file compiled via VuePress. These pages are quite well optimized for SEO , as well as user experience when VuePress has the option for you to generate a Single Page App from vue, vue-router và webpack.
Let’s get started
First we ** init project ** okay
1 2 3 4 | mkdir my-vuepress && cd my-vuepress touch package.json |
Adding the contents of the package.json file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token punctuation">{</span> <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"my-vuepress"</span> <span class="token punctuation">,</span> <span class="token property">"version"</span> <span class="token operator">:</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">,</span> <span class="token property">"author"</span> <span class="token operator">:</span> <span class="token string">"Dao Thai Son"</span> <span class="token punctuation">,</span> <span class="token property">"private"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"dev"</span> <span class="token operator">:</span> <span class="token string">"vuepress dev docs"</span> <span class="token punctuation">,</span> <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"vuepress build docs"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"vuepress"</span> <span class="token operator">:</span> <span class="token string">"^1.4.1"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
In this package.json file, I have defined a few commands before, in it
vuepress dev docs: Used for the development environment, it will build a local server under your computer, give you a web address, and support reloading the web every time you make edits in the source code.vuepress build docs: Will compile your entire project, Markdown files into static HTML files, and you can use them to deploy web to server, public to internet.
After creating the package.json file above, return to Terminal and run the commands again
1 2 3 4 5 6 7 8 9 10 11 12 13 | yarn install mkdir docs // Thư mục chưa các file Markdown và cấu hình cho VuePress trong dự án echo '# Hello VuePress' > docs/README.md # Chỉ cần chạy tiếp lệnh này nữa yarn dev # Kết bạn nhận được như này là bạn đã thành công trong việc bật local server lên success [20:07:43] Build e034f6 finished in 111 ms! ( http://localhost:8080/ ) |
Ta da, this is your site interface.
The project directory structure is also quite simple
1 2 3 4 5 6 7 8 | . ├── docs │ ├── .vuepress (Optional) │ │ │ ├── README.md │ └── package.json |
The website configuration will be placed in docs / .vuepress directory
The content pages will be placed in the docs directory.
The links in the website are automatically VuePress by VuePress according to the hierarchy, taking the docs directory as the original, the Readme.MD files will correspond to the index page. For example:
1 2 3 4 | docs/README.md => http://localhost:8080/ docs/trang-1.md => http://localhost:8080/trang-1.html docs/trang-con/README.md => http://localhost:8080/trang-con/ |
Add a bit of code to make the site more vivid
Default page is also quite simple, right? For users to easily build their own web, VuePress has also built quite a lot of plugins, themes, we just need to install more libraries to use them.
1 2 3 4 5 6 7 8 9 10 11 12 | ... <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"node-sass"</span> <span class="token operator">:</span> <span class="token string">"^4.14.0"</span> <span class="token punctuation">,</span> <span class="token property">"sass-loader"</span> <span class="token operator">:</span> <span class="token string">"^8.0.2"</span> <span class="token punctuation">,</span> <span class="token property">"vuepress"</span> <span class="token operator">:</span> <span class="token string">"^1.4.1"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"@vuepress/plugin-back-to-top"</span> <span class="token operator">:</span> <span class="token string">"1.4.1"</span> <span class="token punctuation">,</span> <span class="token property">"@vuepress/plugin-medium-zoom"</span> <span class="token operator">:</span> <span class="token string">"1.4.1"</span> <span class="token punctuation">,</span> <span class="token property">"@vuepress/theme-vue"</span> <span class="token operator">:</span> <span class="token string">"1.4.1"</span> <span class="token punctuation">}</span> |
Add a few plugins and libraries to the project.
And to use them, we need to configure a little bit in the docs / .vuepress / config.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> description <span class="token punctuation">:</span> <span class="token string">'My VuePress Website'</span> <span class="token punctuation">,</span> theme <span class="token punctuation">:</span> <span class="token string">'@vuepress/vue'</span> <span class="token punctuation">,</span> themeConfig <span class="token punctuation">:</span> <span class="token punctuation">{</span> nav <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> text <span class="token punctuation">:</span> <span class="token string">'Home'</span> <span class="token punctuation">,</span> link <span class="token punctuation">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> text <span class="token punctuation">:</span> <span class="token string">'Go to app'</span> <span class="token punctuation">,</span> link <span class="token punctuation">:</span> <span class="token string">'https://facebook.com/sonkunn.96'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> text <span class="token punctuation">:</span> <span class="token string">'Github'</span> <span class="token punctuation">,</span> link <span class="token punctuation">:</span> <span class="token string">'https://github.com/daothaison'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> sidebar <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title <span class="token punctuation">:</span> <span class="token string">'Homepage'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> collapsable <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token string">'@vuepress/back-to-top'</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'@vuepress/medium-zoom'</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> |
As soon as you edit the config.js file, the site will automatically reload and display the latest content there. 
And we have the Navbar , and a Sidebar on the left. VuePress also extremely convenient, we can configure Sidebar many levels, opening and closing things just by config in config.js file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token operator">...</span> sidebar <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title <span class="token punctuation">:</span> <span class="token string">'Homepage'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> collapsable <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> title <span class="token punctuation">:</span> <span class="token string">'Get started'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> <span class="token string">'/get-started'</span> <span class="token punctuation">,</span> collapsable <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> sidebarDepth <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> children <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'/get-started/installation'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token operator">...</span> |
It looks a bit simpler too (lol), now you just need to add content to the Markdown pages to make your website more lively.
Conclusion
VuePress is really accessible, editing the content is quite simple during development.
Thank you for reading this far, continue reading the articles in this series 