|
1 | | -This website was created with [Docusaurus](https://docusaurus.io/). |
| 1 | +# Website |
2 | 2 |
|
3 | | -# What's In This Document |
| 3 | +This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. |
4 | 4 |
|
5 | | -- [Get Started in 5 Minutes](#get-started-in-5-minutes) |
6 | | -- [Directory Structure](#directory-structure) |
7 | | -- [Editing Content](#editing-content) |
8 | | -- [Adding Content](#adding-content) |
9 | | -- [Full Documentation](#full-documentation) |
| 5 | +### Installation |
10 | 6 |
|
11 | | -# Get Started in 5 Minutes |
12 | | - |
13 | | -1. Make sure all the dependencies for the website are installed: |
14 | | - |
15 | | -```sh |
16 | | -# Install dependencies |
17 | | -$ yarn |
18 | | -``` |
19 | | - |
20 | | -2. Run your dev server: |
21 | | - |
22 | | -```sh |
23 | | -# Start the site |
24 | | -$ yarn start |
25 | | -``` |
26 | | - |
27 | | -## Directory Structure |
28 | | - |
29 | | -Your project file structure should look something like this |
30 | | - |
31 | | -``` |
32 | | -my-docusaurus/ |
33 | | - docs/ |
34 | | - doc-1.md |
35 | | - doc-2.md |
36 | | - doc-3.md |
37 | | - website/ |
38 | | - blog/ |
39 | | - 2016-3-11-oldest-post.md |
40 | | - 2017-10-24-newest-post.md |
41 | | - core/ |
42 | | - node_modules/ |
43 | | - pages/ |
44 | | - static/ |
45 | | - css/ |
46 | | - img/ |
47 | | - package.json |
48 | | - sidebars.json |
49 | | - siteConfig.js |
50 | 7 | ``` |
51 | | - |
52 | | -# Editing Content |
53 | | - |
54 | | -## Editing an existing docs page |
55 | | - |
56 | | -Edit docs by navigating to `docs/` and editing the corresponding document: |
57 | | - |
58 | | -`docs/doc-to-be-edited.md` |
59 | | - |
60 | | -```markdown |
61 | | ---- |
62 | | -id: page-needs-edit |
63 | | -title: This Doc Needs To Be Edited |
64 | | ---- |
65 | | - |
66 | | -Edit me... |
67 | | -``` |
68 | | - |
69 | | -For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) |
70 | | - |
71 | | -## Editing an existing blog post |
72 | | - |
73 | | -Edit blog posts by navigating to `website/blog` and editing the corresponding post: |
74 | | - |
75 | | -`website/blog/post-to-be-edited.md` |
76 | | - |
77 | | -```markdown |
78 | | ---- |
79 | | -id: post-needs-edit |
80 | | -title: This Blog Post Needs To Be Edited |
81 | | ---- |
82 | | - |
83 | | -Edit me... |
| 8 | +$ yarn |
84 | 9 | ``` |
85 | 10 |
|
86 | | -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) |
87 | | - |
88 | | -# Adding Content |
89 | | - |
90 | | -## Adding a new docs page to an existing sidebar |
91 | | - |
92 | | -1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: |
93 | | - |
94 | | -```md |
95 | | ---- |
96 | | -id: newly-created-doc |
97 | | -title: This Doc Needs To Be Edited |
98 | | ---- |
| 11 | +### Local Development |
99 | 12 |
|
100 | | -My new content here.. |
101 | 13 | ``` |
102 | | - |
103 | | -1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`: |
104 | | - |
105 | | -```javascript |
106 | | -// Add newly-created-doc to the Getting Started category of docs |
107 | | -{ |
108 | | - "docs": { |
109 | | - "Getting Started": [ |
110 | | - "quick-start", |
111 | | - "newly-created-doc" // new doc here |
112 | | - ], |
113 | | - ... |
114 | | - }, |
115 | | - ... |
116 | | -} |
| 14 | +$ yarn start |
117 | 15 | ``` |
118 | 16 |
|
119 | | -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) |
| 17 | +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. |
120 | 18 |
|
121 | | -## Adding a new blog post |
| 19 | +### Build |
122 | 20 |
|
123 | | -1. Make sure there is a header link to your blog in `website/siteConfig.js`: |
124 | | - |
125 | | -`website/siteConfig.js` |
126 | | - |
127 | | -```javascript |
128 | | -headerLinks: [ |
129 | | - ... |
130 | | - { blog: true, label: 'Blog' }, |
131 | | - ... |
132 | | -] |
133 | 21 | ``` |
134 | | - |
135 | | -2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: |
136 | | - |
137 | | -`website/blog/2018-05-21-New-Blog-Post.md` |
138 | | - |
139 | | -```markdown |
140 | | ---- |
141 | | -author: Frank Li |
142 | | -authorURL: https://twitter.com/foobarbaz |
143 | | -authorFBID: 503283835 |
144 | | -title: New Blog Post |
145 | | ---- |
146 | | - |
147 | | -Lorem Ipsum... |
| 22 | +$ yarn build |
148 | 23 | ``` |
149 | 24 |
|
150 | | -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) |
| 25 | +This command generates static content into the `build` directory and can be served using any static contents hosting service. |
151 | 26 |
|
152 | | -## Adding items to your site's top navigation bar |
| 27 | +### Deployment |
153 | 28 |
|
154 | | -1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: |
155 | | - |
156 | | -`website/siteConfig.js` |
157 | | - |
158 | | -```javascript |
159 | | -{ |
160 | | - headerLinks: [ |
161 | | - ... |
162 | | - /* you can add docs */ |
163 | | - { doc: 'my-examples', label: 'Examples' }, |
164 | | - /* you can add custom pages */ |
165 | | - { page: 'help', label: 'Help' }, |
166 | | - /* you can add external links */ |
167 | | - { href: 'https://github.com/facebook/docusaurus', label: 'GitHub' }, |
168 | | - ... |
169 | | - ], |
170 | | - ... |
171 | | -} |
172 | 29 | ``` |
173 | | - |
174 | | -For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) |
175 | | - |
176 | | -## Adding custom pages |
177 | | - |
178 | | -1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: |
179 | | -1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: |
180 | | - |
181 | | -`website/siteConfig.js` |
182 | | - |
183 | | -```javascript |
184 | | -{ |
185 | | - headerLinks: [ |
186 | | - ... |
187 | | - { page: 'my-new-custom-page', label: 'My New Custom Page' }, |
188 | | - ... |
189 | | - ], |
190 | | - ... |
191 | | -} |
| 30 | +$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy |
192 | 31 | ``` |
193 | 32 |
|
194 | | -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). |
195 | | - |
196 | | -# Full Documentation |
197 | | - |
198 | | -Full documentation can be found on the [website](https://docusaurus.io/). |
| 33 | +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. |
0 commit comments