Thumbnail image

Making a website

Sat, Feb 5, 2022 3-minute read

Hugo

Hugo site is very easy and fast-building module for everyone. Follow these procedures to make your own site. But I recommend you not to use submodule for installing your themes. Therefore I’ll show you how to construct your website down below. (before starting, make sure that you have GitHub account; GitHub)

  1. To use Hugo, first install git and go.

  2. Go to command line (terminal for Mac), and put: hugo new site "your site name". Then move to the folder, and turn your Hugo Project in to a Hugo module: Put: hugo mod init github.com/me/my-project (“me” is your GitHub account name, “my-project” is your repository name) If you see :go command not found, use :export PATH=$PATH:usr/bin/go/bin. You have to make sure that you have the file’s path. Same with Git.

  3. Declare a module as a dependency of your site: hugo mod get github.com/lxndrblz/anatole (for this website format)

  4. Add the following lines at the end of your config.toml (for this website format)

[module]
  # uncomment line below for temporary local development of module
  # replacements = "github.com/lxndrblz/anatole -> ../../anatole"
  [[module.imports]]
    path = "github.com/lxndrblz/anatole"
    disable = false

Edit files and upload it to server

I recommend you to use Atom for your text editor. After installing hugo in command line, you can edit it in Atom.

  1. If you have all the folders needed to create new post in the upper folder (see https://github.com/lxndrblz/anatole/tree/master/exampleSite, imitate the configuration), you are ready to boom. Put: hugo new post/"---(file name)".md"(extension is “md”).

  2. Put: hugo. You’ll have the folder named “public”.

  3. Get the website domain and server, and upload the contents filed in the “public” to the server. (server recommendation: お名前.com)

That’s it.

Host it to GitHub Pages (free)

If you want to upload your file to GitHub pages and have your website for free, just put: (change “me” and “my-project” into yours)

$ cd "your folder (repository) to be uploaded"
$ git init
$ git add .
$ git commit -m "my first commit"
$ git remote add origin https://github.com/me/my-project.git
$ git push -u origin master

As of 2022, the main is the default branch for GitHub, so maybe you can use main instead of master (I didn’t check it, however).

Make sure that before uploading your contents you have made the repository (for your website) in GitHub.

After finishing the process, you’ll see your website (e.g. https://me.github.io/my-project).

Note: Before uploading all files, you have to change the “baseURL” in config.toml into your website URL.

Problems in Git command (remote repository)

If you have problems in Git command (e.g. fatal: unable to access, The requested URL returned error: 403), put:

git remote set-url origin url=ssh://git@github.com/me/my-project.git

If it doesn’t work, set ssh key:

ssh-keygen -t rsa

and copy it to GitHub setting pages(Seeting -> SSH and GPG keys). In order to copy it, put:

pbcopy <~/.ssh/{name of new ssh key}.pub

Lastly, you have to set new configuration for new ssh key. Put:

vi ~/.ssh/config

In vim, When you want to make changes, put “esc” and “:w”, and “:q” for quit.

These are the steps to be able to access to the GitHub remote repository from local pc.