Creating a Blog

We will use Hugo to make a blog. Hugo is a static site generator. We need our site to be static and not dynamic (like Wordpress) to upload it to Cloudflare.

MacOS: if not yet on your machine install the package manager Homebrew. A very good explanation can be found here

Copy and paste below command in your terminal: (open your terminal with spot light <CMD-Space> and type terminal)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Check if brew is correct installed and working:

brew doctor

If all went okay we need to install some programs with brew. Enter in your terminal:

brew install hugo
brew install git
brew install node

To check if all is correct installed enter below commands in the terminal:

hugo version
git  -v
node -v

See also Hugo Quick Start

There are many themes available for Hugo. I like the anatole theme and will use that to create a new blog.

cd ~
mkdir -p www
hugo new site myblog
cd myblog
git init
git clone https://github.com/lxndrblz/anatole.git themes/anatole/
hugo serve

With the last command your new blog went up local on your pc.

In the screen you will see: Web Server is available at //localhost:some_number The some_number will be something like 1313

Open your browser and enter ://localhost:1313/ (change the number as applicable). And your new blog will open, but there is not (yet) much there.

We have to do a lot more setup. See the wiki for detailed info.

We need to make a configuration file (config.toml) for our blog.

cd ~/www/myblog/
touch config.toml

Open the config.toml with any editor (You can use Textedit for this, but make sure to save the file as plain text!) copy and paste the below in the config file.

This config is for the anatole theme. If you use another theme check the documentation how to set up. Most themes have a directory exampleSite. In this directory there will be a config.toml file which you can use as start. If you feel really lazy you can copy the config.toml file to your directory ~/www/myblog/

baseURL = "https://example.com"
languageCode = "en"
DefaultContentLanguage = "en"

# A hash tag means the line is a comment and will not be used
# title = "My new blog"

theme = "anatole"

#Syntax highlighting
pygmentUseClasses = true
pygmentCodeFences = true
pygmentCodefencesGuessSyntax = true

localizedDates = false

[params]
    title="Hello People"
    author="Me"
    description = "Lets start a better world"
    profilePicture = avatar.png

    [[params.socialIcons]]
        icon = "fab fa-tiktok"
        title = "TikTok"
        url = "https://www.tiktok.com/your_username"
    [[params.socialIcons]]
        icon = "fab fa-instagram"
        title = "Instagram"
        url = "https:///www.instagram.com/your_username"
    [[params.socialIcons]]
        icon = "fas fa-envelop"
        title = "Email"
        url = "mailto:[email protected]"

[menu]
    [[menu.main]]
        name = "Home"
        identifier = "home"
        weight = 100
        url = "/"
    [[menu.main]]
        name = "Posts"
        identifier = "posts"
        weight = 200
        url = "/blog/"
    [[menu.main]]
        name = "About"
        weight = 300
        identifier = 300
        url = "/about"
exit
# This is needed in case you want to enter html in the markdown
[markup]
    [markup.goldmark]
        [markup.goldmark.renderer]
            unsafe = true

This is a very basic config. Again, see the wiki for detailed info.

cd ~/www/myblog/
hugo serve -D

Now the blog already looks a lot better. But there is not yet a profile picture.

The profile picture is already in the config file, the avatar.png! To get this in the blog have a picture (.png or .jpg) and save this in the folder named static. Rename it to avatar.png or update your config.toml with the picture name.

Now the picture should be there.