- Install Hugo version v0.111.3
- Need to be connected to internet to load Hinode theme dependencies and modules
- Clone this repository
- Install all requirements
- Change directory:
<your-path-to-the-repository> - Install dependencies
npm install
- Start development server
npm run start
# or
hugo server -D- Open Chrome, web server is available at
http://localhost:<assigned-port-depends>- example:
http://localhost:1313
- example:
- Create a new .md file in the /content/blog/ folder
- There are 2 parts to display an article:
- an information / header part and
- a body part of the article
- Here is an example of a header for a new blog article:
1 ---
2 author: <author-name>
3 title: <title-of-my-blog-post>
4 date: YYYY-MM-DD
5 tags: ["exemple1", "tag2", "anotherOne"]
6 thumbnail: img/<name-of-your-picture>.jpg
7 ---
- From line 8 you can write all the text you want respecting the markdown rules of the goldmark parser.
- In
config.tomlline 173unsafe = true: it allows you to put links in the body text of a blog post
- In
- In addition, there are tags specific to the chosen theme. More information in the docs
- Create a new file or folder in the
content/folder - The name given will be the identifier in
config.tomlcode - This .md file must have a correct header (see part How to add a blog post)
- The content is then free following the markdown goldmark rules
- The file / page is accessible via its url defined in the
config.tomlfile- If you want to add it to the top menubar, read the next part
- Go to
config.toml - Add +1 to weight line 6 and 7:
[languages.en]
weight = new-weight- Add an item under the tag below:
[[languages.en.menu.main]]- It is necessary to specify 3 points: name, url and weight (location of the item in the top bar)
- Here is an example:
-
[[languages.en.menu.main]] name = "Name which is displayed" url = "/<path-to-folder>/<where-your-new-content-folder-is>/" weight = number
- This tab will be before the items that have a weight lower than
<number>and after the items that have a weight higher than<number>
-
- If you have no content at the
url, you get an error. To solve it you have to create a page or a folder with the same name as yoururl(for more information see next section) - If you want to add a drop down menu, you just have then to specify sub-menus with
parentandweight
- Here is an example:
-
[[languages.en.menu.main]] identifier = "Unique name for this" name = "Name which is displayed child" url = "/<path-to-folder>/<where-your-new-content-folder-is>/<sub-file>/" parent = "Name which is displayed" weight = number
-
- Go to the root directory:
cd <your-path-to-the-repository> - Use the command line to build
npm run build- This command generates the html code, css, and more, to be able to deploy your website
- And puts it in an automatically created folder called public/
You can check that the build is working well by running the build code with a small local python server. You must have python3 installed. This is not explained in this document.
- Change directory:
<your-path-to-the-repository>/public/ - Execute the command:
python3 -m http.server - Web server is available at
http://localhost:8000for example
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent