This is the source repository for an LDaCA based website
hugo version
example:
hugo v0.110.0+extended darwin/arm64 BuildDate=unknown
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
git submodule update --init --recursive
hugo serve
Public
folder
Public
folder if you have one thenhugo
Public
and run a web server: for example python3 -m http.server 8000
with python and go to http://localhost:8000/ to see what it looks like. Example:
git clone git@github.com:Language-Research-Technology/ya-ldaca-website.git
cd ya-ldaca-website
git submodule update --init --recursive
Adding the submodule in the step before is required to install the theme used in this Hugo site
The current theme used is called LoveIt based on LeaveIt
and KeepIt
it has about 2.7K stars and it is updated frequently
Configuring the website is using the config.toml
file and assets/css/_custom.scss
file
The file should be self documented. See config.toml and document as you go.
You can specify more metadata for each page you include and it will affect how the page behaves.
Example:
Add a table of contents by adding the following into each page.
---
toc:
enable: true
auto: true
---
And all your refs like:
## This is a #ref on a page
will have a contents dropdown on the page
For more examples see: LoveIt#front-matter or Hugo Front Matter
Preconfigured front matter metadata that are used when doing hugo new
All content is stored in content
folder.
It can be organised using
You can organise the content by Leaf bundle which means it has no children
or
You can organise the content bu Branch which will have a collection of attachments and content, this will be organised as a List If you use list you and include an _index.md
file in your folder for the purposes of configuring front matter for the lists. You can ommit the _index.md
name however this will affect children pages on your site.
Use the assets/css/_custom.scss
file to alter the default style of the theme
Example: Align the title of the text to the left. Sometimes is necessary to use !important sice the style sheet will cascade with other value currently used in the theme.
.single-title {
text-align: left !important;
}
To insert raw html use in each page:
{{< raw >}}
<iframe width="560" height="315" src="https://www.youtube.com/embed/WMDduy38zsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
{{< /raw >}}
To add a javascript file either add it in assets or in the conf.toml
Example Twitter Timeline:
[params.page.library]
[params.page.library.js]
twitterWidgets = "https://platform.twitter.com/widgets.js"
It will then be available for any page
Blog posts are organised as folders for better access of its resources the same as in content.
If you organise your page bundle as a single page
Include a folder:
/posts/post-number-1/
index.md
will have the markdown
image1.png
some image
file.pdf
some file
In each folder your single page will have access to the resources relative to its location, example:
index.md:
![alt text](image1.png "Some Alternative text shown below the image")
[Download File](file.pdf)
The data folder can be used to generate data driven content
Example:
Layouts are used to replace current theme behaviour. There is only one file changed in the theme and that is the 404 page which includes an image that can be provided via configuration
It is best to use layouts as little as possible because when the Themes are updated it would become very hard to mantain and update Hugo and the themes.
content
folder and install all of the images/files in each page bundle. hugo serve
and start again to see changes reflected becuase the live reload does not capture this.hugo
and test it with a basic http server