changed to blowfish theme / might change back ...
This commit is contained in:
ahmza
@@ -0,0 +1,351 @@
|
||||
---
|
||||
title: Setup a HUGO Site
|
||||
date: 2022-12-31T22:03:52Z
|
||||
author: "ahmza"
|
||||
draft: false
|
||||
weight:
|
||||
|
||||
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
|
||||
---
|
||||
|
||||
## **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 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/)
|
||||
|
||||
## **Prerequisites**
|
||||
|
||||
- Git
|
||||
|
||||
## **Installing HUGO**
|
||||
|
||||
[Official steps](https://gohugo.io/installation/)
|
||||
|
||||
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_
|
||||
|
||||
- Install [homebrew](https://brew.sh/)
|
||||
|
||||
```bash
|
||||
brew install hugo
|
||||
```
|
||||
|
||||
### _Arch_
|
||||
|
||||
```bash
|
||||
sudo pacman -S hugo
|
||||
```
|
||||
|
||||
### Confirm Installation
|
||||
|
||||
```bash
|
||||
hugo version
|
||||
```
|
||||
|
||||
## Create your site
|
||||
|
||||
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
|
||||
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
|
||||
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
|
||||
vim archetypes/posts.md
|
||||
```
|
||||
|
||||
Paste the following base template
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: { { replace .TranslationBaseName "-" " " | title } }
|
||||
date: { { .Date } }
|
||||
author: "<author>"
|
||||
draft: true
|
||||
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
|
||||
---
|
||||
|
||||
## **Introduction**
|
||||
|
||||
## **Conclusion**
|
||||
```
|
||||
|
||||
If the posts folder does not exist, create it
|
||||
|
||||
```bash
|
||||
mkdir content/posts
|
||||
```
|
||||
|
||||
Create and edit a post
|
||||
|
||||
> 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.
|
||||
|
||||
```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_
|
||||
|
||||
```
|
||||
➜ hugo server -D
|
||||
Start building sites …
|
||||
hugo v0.109.0+extended darwin/arm64 BuildDate=unknown
|
||||
|
||||
| EN
|
||||
-------------------+-----
|
||||
Pages | 10
|
||||
Paginator pages | 0
|
||||
Non-page files | 0
|
||||
Static files | 0
|
||||
Processed images | 0
|
||||
Aliases | 2
|
||||
Sitemaps | 1
|
||||
Cleaned | 0
|
||||
|
||||
Built in 12 ms
|
||||
Watching for changes in /home/ahmza/prj/ahmza/{archetypes,assets,content,data,layouts,static,themes}
|
||||
Watching for config changes in /home/ahmza/prj/ahmza/config.yml
|
||||
Environment: "development"
|
||||
Serving pages from memory
|
||||
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
|
||||
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._
|
||||
|
||||
## Configure Site
|
||||
|
||||
Open the config.yml file in a text editor.
|
||||
|
||||
```bash
|
||||
vim config.yml
|
||||
```
|
||||
|
||||
**Important changes you need to make**
|
||||
|
||||
- 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
|
||||
baseURL: "<your sites URL>"
|
||||
title: <your site title>
|
||||
paginate: 5
|
||||
theme: PaperMod
|
||||
|
||||
enableRobotsTXT: true
|
||||
buildDrafts: false
|
||||
buildFuture: false
|
||||
buildExpired: false
|
||||
enableEmoji: true
|
||||
|
||||
googleAnalytics: <Google Analytics Tag>
|
||||
|
||||
minify:
|
||||
disableXML: true
|
||||
minifyOutput: true
|
||||
|
||||
outputs:
|
||||
home:
|
||||
- HTML
|
||||
- RSS
|
||||
- JSON
|
||||
|
||||
params:
|
||||
env: production # to enable google analytics, opengraph, twitter-cards and schema.
|
||||
title: <title>
|
||||
description: "<description>"
|
||||
keywords: [Blog, Portfolio, PaperMod]
|
||||
author: <author>
|
||||
images: ["<link or path of image for opengraph, twitter-cards>"] #Change this
|
||||
DateFormat: "January 2, 2006"
|
||||
defaultTheme: auto # dark, light
|
||||
disableThemeToggle: false
|
||||
|
||||
ShowReadingTime: true
|
||||
ShowShareButtons: false
|
||||
ShowPostNavLinks: false
|
||||
ShowBreadCrumbs: true
|
||||
ShowCodeCopyButtons: true
|
||||
ShowWordCount: true
|
||||
ShowRssButtonInSectionTermList: true
|
||||
UseHugoToc: false
|
||||
disableSpecial1stPost: false
|
||||
disableScrollToTop: false
|
||||
hideFooter: false
|
||||
comments: false
|
||||
hidemeta: false
|
||||
hideSummary: false
|
||||
showtoc: true
|
||||
tocopen: false
|
||||
|
||||
assets:
|
||||
# disableHLJS: true # to disable highlight.js
|
||||
# disableFingerprinting: true
|
||||
favicon: "/img/favicon.png"
|
||||
favicon16x16: "/img/favicon.png"
|
||||
favicon32x32: "/img/favicon.png"
|
||||
apple_touch_icon: "/img/favicon.png"
|
||||
safari_pinned_tab: "/img/favicon.png"
|
||||
|
||||
label:
|
||||
text: "<Home>"
|
||||
icon: /img/favicon.png
|
||||
iconHeight: 35
|
||||
|
||||
# profile-mode
|
||||
profileMode:
|
||||
enabled: true # needs to be explicitly set
|
||||
title: "Welcome \U0001F44B"
|
||||
subtitle: "<subtitle>"
|
||||
imageUrl: "/img/favicon.png"
|
||||
imageWidth: 120
|
||||
imageHeight: 120
|
||||
imageTitle: "my image"
|
||||
buttons:
|
||||
- name: posts
|
||||
url: posts
|
||||
- name: archive
|
||||
url: archives
|
||||
- name: tags
|
||||
url: tags
|
||||
|
||||
# home-info mode
|
||||
homeInfoParams:
|
||||
Title: "Welcome \U0001F44B"
|
||||
Content: "subtitle"
|
||||
|
||||
socialIcons:
|
||||
- name: LinkedIn
|
||||
url: "https://linkedin.com/in/"
|
||||
- name: gitlab
|
||||
url: "https://gitlab.com/"
|
||||
|
||||
cover:
|
||||
hidden: false # hide everywhere but not in structured data
|
||||
hiddenInList: false # hide on list pages and home
|
||||
hiddenInSingle: false # hide on single page
|
||||
|
||||
editPost:
|
||||
URL: "https://gitlab.com/<user>/<repo>/-/blob/main/content"
|
||||
Text: "Suggest Changes" # edit text
|
||||
appendFilePath: true # to append file path to Edit link
|
||||
|
||||
# for search
|
||||
# https://fusejs.io/api/options.html
|
||||
fuseOpts:
|
||||
isCaseSensitive: false
|
||||
shouldSort: true
|
||||
location: 0
|
||||
distance: 1000
|
||||
threshold: 0.4
|
||||
minMatchCharLength: 0
|
||||
keys: ["title", "permalink", "summary", "content"]
|
||||
|
||||
menu:
|
||||
main:
|
||||
- identifier: posts
|
||||
name: posts
|
||||
url: /posts/
|
||||
weight: 1
|
||||
- identifier: archive
|
||||
name: archive
|
||||
url: /archives/
|
||||
weight: 10
|
||||
- identifier: tags
|
||||
name: tags
|
||||
url: /tags/
|
||||
weight: 20
|
||||
- identifier: search
|
||||
name: search
|
||||
url: /search/
|
||||
weight: 30
|
||||
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
|
||||
pygmentsUseClasses: true
|
||||
markup:
|
||||
highlight:
|
||||
noClasses: false
|
||||
codeFences: true
|
||||
guessSyntax: true
|
||||
# lineNos: true
|
||||
```
|
||||
|
||||
## Run the server again
|
||||
|
||||
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.
|
||||
|
||||
## **Conclusion**
|
||||
|
||||
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
|
||||
- The _HUGO_ built in server
|
||||
- webp + webm (still need to add this)
|
||||
- shortcodes (still need to add this)
|
||||
Reference in New Issue
Block a user