ahmza/blog-ahmza-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated content in old posts.

Browse Source
This commit is contained in:
Hamza Ahmed
2024-01-05 23:54:51 +00:00
parent c916352195
commit cf68a1d2cc
10 changed files with 745 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/posts/setup-a-hugo-site.md
+75 -51
View File
@@ -3,57 +3,66 @@ title: Setup a HUGO Site
date: 2022-12-31T22:03:52Z
author: "ahmza"
draft: false
weight:
weight:
tags: ["blog","website","web development","HUGO"]
tags: ["blog", "website", "web development", "HUGO"]
description: "Always wanted to setup a static website. Look no further !! In this post we go over the basics of setting up a HUGO site"
canonicalURL: "https://blog.ahmza.com/Page%28/posts/setting-up-a-hugo-site.md%29"
cover:
image: "/img/hugo/feature.webp" # image path/url
alt: "HUGO Logo" # alt text
caption: "The HUGO logo" # display caption under cover
relative: false # when using page bundles set this to true
image: "/img/hugo/feature.webp" # image path/url
alt: "HUGO Logo" # alt text
caption: "The HUGO logo" # display caption under cover
relative: false # when using page bundles set this to true
---
## **Introduction**
Hugo is a static site generator, a tool that allows us to pre-compile our website into static HTML, CSS and JS.
The main benefit of using such methods is speed.
A Static site takes a lot less time to load than a site that uses databases.
_HUGO_ is a static site generator, a tool that allows us to pre-compile our
website into static HTML, CSS and JS. The main benefit of an _ssg_ is speed. A
Static site takes a lot less time to load than a site that uses databases.
For more information on HUGO read my other post [Hugo Static Site Generator](https://blog.ahmza.com/posts/hugo-static-site-generator/)
For more information on HUGO read my other post [Hugo Static Site
Generator](https://blog.ahmza.com/posts/hugo-static-site-generator/)
## **Prerequisites**
- Git
## **Installing HUGO**
[Official steps](https://gohugo.io/installation/)
The HUGO binary is what we will use throughout the creation of our project to initially setup our site then create posts etc...
This step will vary depending on your operating system and distribution.
I will show the steps for MacOS and Arch based Linux distros.
The _HUGO_ binary is used to initialize our site then create posts etc... Below
are the steps for _MacOS_ and _Arch_ based _Linux_ distros.
### _MacOS_
### MacOS
- Install [homebrew](https://brew.sh/)
``` bash
```bash
brew install hugo
```
### Arch
``` bash
### _Arch_
```bash
sudo pacman -S hugo
```
### Confirm Installation
``` bash
```bash
hugo version
```
## Create your site
This assumes a few steps for you, i.e the theme used. The settings in this guide will mimic the base config of my site
``` bash
This assumes choices for you, i.e the theme used.
> The settings in this guide will mimic the base config of my site
```bash
hugo new site -f yml <your-sitename>
cd <your-sitename>
git init
@@ -62,34 +71,34 @@ echo "theme: 'PaperMod'" >> config.yml
```
## Create Content
We will now begin adding new content to our website. Lets create our first post.
Lets start by creating a template for our posts.
``` bash
```bash
vim archetypes/posts.md
```
Paste the following base template
``` markdown
```markdown
---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
title: { { replace .TranslationBaseName "-" " " | title } }
date: { { .Date } }
author: "<author>"
draft: true
weight:
weight:
tags: [""]
description: ""
canonicalURL: "{{ .Page | absURL }}"
cover:
image: "<image path/url>" # image path/url
alt: "<alt text>" # alt text
caption: "<text>" # display caption under cover
relative: false # when using page bundles set this to true
image: "<image path/url>" # image path/url
alt: "<alt text>" # alt text
caption: "<text>" # display caption under cover
relative: false # when using page bundles set this to true
---
## **Introduction**
@@ -98,27 +107,32 @@ cover:
```
If the posts folder does not exist, create it
``` bash
```bash
mkdir content/posts
```
Create and edit a post
``` bash
> pick an editor of your choice. **I use NVIM BTW**
```bash
hugo new posts/<post-name>.md
vim content/posts/<post-name>.md
```
## Start the server
Now that we have created our site, installed a theme and created a post lets start the server.
Now that we have created our site, installed a theme and created a post lets
start the server.
``` bash
```bash
hugo server -D
```
*The -D flag tells hugo server to build drafts. (notice how we have a draft: option in our posts template.)*
*Of course once you have finished a post you set draft to false like so draft: false*
You will be shown something like the following:
_The -D flag tells hugo server to build drafts. (notice how we have a draft:
option in our posts template.) Of course once you have finished a post you set
draft to false like so draft: false_
```
➜ hugo server -D
@@ -146,22 +160,25 @@ Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```
*Notice the second line to the bottom. Web Server... This line gives you a localhost url that you can use in your browser to view your site locally.*
_Notice the second line to the bottom. Web Server... This line gives you a
localhost URL that you can use in your browser to view your site locally._
## Configure Site
Open the config.yml file in a text editor.
``` bash
```bash
vim config.yml
```
**Important changes you need to make**
- baseURL - this is the URL your site will be accessed externally. In my case. https://blog.ahmza.com
- title - is the title of your page.
- baseURL - External URL. In my case. https://blog.ahmza.com
- title - Title of your site.
Here is my config.yml with bits redacted so you can fill them in
``` yaml
```yaml
baseURL: "<your sites URL>"
title: <your site title>
paginate: 5
@@ -305,23 +322,30 @@ markup:
```
## Run the server again
Run the server and check out your hard work. Change settings make posts etc. Have fun !!
``` bash
Run the server and check out your hard work. Change settings make posts etc.
Have fun !!
```bash
hugo server -D
```
## Publish your site
Once you are happy with your site, you may want to publish it to the internet.
In the next post [Publishing your HUGO site](https://blog.ahmza.com/posts/publishing-your-hugo-site/)
I will cover a basic method of publishing your site as well as a more complicated but automated workflow that I use.
In the next post [Publishing your HUGO
site](https://blog.ahmza.com/posts/publishing-your-hugo-site/) I will cover a
basic method of publishing your site as well as a more complicated but automated
workflow that I use.
## **Conclusion**
Through this post you have learned to create your own HUGO site as well as create and edit posts.
We also learned about
Through this post you have learned to create your own HUGO site as well as
create and edit posts. We also learned about
- archetypes
- Mark posts as drafts (expand on this
- The hugo built in server (still need to add this))
- Mark posts as drafts
- The _HUGO_ built in server
- webp + webm (still need to add this)
- shortcodes (still need to add this)