DIY: webpage!

Promises

Using the static web generator Hugo and the wonderful theme Hugo-Academic, we promise to:

1. Build a professional webpage in less than 10 minutes that looks like this
2. Do not write a single line of neither HTML nor CSS: only Markdown which is very simple to learn!
3. That’s already a lot

Tools needed

1. [Optional but highly recommended] Git and a Github or Gitlab(.com) (but not the local Gitlab!) account
2. A good text editor: we recommend VSCode
3. [Optionnal: to work locally] Hugo

Let’s do it!

Build the basic webpage

All the stages are detailed on the exhaustive documentation of Hugo Academic but we do remind some of them here. We assume you have a Github account but it is the same if you own a Gitlab(.com) one:

1. Have Github/Gitlab.com account
2. Go to Netlify
3. Allow Netlify to modify your github/gitlab account
4. Choose a repo name (e.g “webpage”)

At this stage, you already have a basic but working website. The URL is however UGLY:

1. In your Netlify account: Settings → Domain managment: Change the URL base name (e.g myname.netlify.com)
2. Check again on the new URL!

Every time you do a push to your remote Git reposity, Netlify will rebuild your website. In case the rebuild failed, you can access the log to correct the mistake. Rebuilding the website takes about 20seconds.

Local version

You have to install Hugo on your computer (see above). We assume that you want your folder to be named webpage.

• Clone the repository

> git clone https://path_to_repo webpage

• In a terminal and in the folder, launch

> git submodule uppublishDate --init --recursive
> hugo serve

• Launch your browser and go to http://localhost:1313

UppublishDate theme

> sh uppublishDate_academic.sh

And do not forget to commit and push !

Send modification to remote

• Ask Git to track new file :

> git add /path/to/newfile

• (Lazy version) Commit every changes in the track files

> git commit -a -m "Message of the commit"

• Push to the remote

> git push

Refresh your webpage, it should be actualized in the minut.

/config.toml

This is the main config file: choose the options you want by filling the blanks spaces (quite intuitive)

Add/Modify content…

For every operations of that kind, we refer to the documentation.