Some days ago i stumbled upon the amazing small-tech.org project by Aral Balkan and Laura Kalbag. I have been following their work for a while and i'd like to support them a bit by using and exploring their Small Web construction set. It comes bundled with the Hugo static site generator, so I was immediately able to use the nice Ghostwriter Theme for this blog.
curl -s https://sitejs.org/install | bash
Now you are ready to create a folder for your Hugo project and jump into it:
mkdir my-hugo-blog cd my-hugo-blog
and create a new site using the following command:
site hugo new site .hugo
Now you'll find the Hugo folder structure in the directory you created. Open this in your favourite code editor.
For starters i chose the Ghostwriter Theme from https://themes.gohugo.io, but this is really up to you.
Instead of cloning the repo into my directory i chose to download the .zip from the Github Page and unpacked it in the themes-folder of my Hugo project.
Now we have to tell our project that we want to use the installed Theme. Open the config.toml file in the projects root directory. Mine looks like this:
baseURL = "/" languageCode = "en-us" title = "SubGuy's Devblog" theme = "ghostwriter-master" paginate = "10" [Author] name = "Subliminal_Guy" [Params] mainSections = ["post"] intro = true headline = "subguy's devblog " description = "babbeling code since 2017" github = "https://github.com/SubliminalGuy" gitlab = "https://gitlab.com/subliminal_guy" twitter = "https://twitter.com/SubKid" opengraph = true shareTwitter = true dateFormat = "Mon, Jan 2, 2021" authorbox = true [Permalinks] post = "/:filename"
Copy everything. The most important part for now is, that you set the title as you like and the theme to "ghostwriter-master" (or whatever the directory name for your installed theme is - it has to be verbatim).
Take a look at the [Params]. Most of them are pretty self-explanatory. You can play around with them later.
Now you can copy the post-folder in "themes/ghostwriter-master/exampleSite/content" (respectively "themes/YOUR-THEME-FOLDER-NAME/exampleSite/content") into the content-folder of your projects root directory.
Now start the development server by typing the following command into the terminal. This should work from your root directory.
If you now check your browser at https://localhost you should see the following:
I deleted all the blogposts and created a new one with the following prompt:
site hugo new post/building-a-devblog.md
In this file I finally entered the Markdown for my first blog post that you're currently reading.
The deployment of this blog on a VPS of your choice is as easy as it gets. Simply install Site.js in the designated directory, upload the files we created and enter:
Your blog should be live immediately. Enjoy!