article: netlifycms hugo and gitlab

Taskfile.yml

@@ -7,7 +7,7 @@ tasks:
 
   start_server:
     cmds:
-      - hugo server -D
+      - hugo server -D --buildFuture
 
   new_post:
     cmds:

content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md

@@ -67,6 +67,6 @@ cleanest in terms of code readability.
 
 ## Appendix
 
-- [Example source code](<https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/source_code/source_code/example>)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/source_code/source_code/example)
 - [SQLAlchemy](https://www.sqlalchemy.org/)
 - [flask-sqlalchemy](http://flask-sqlalchemy.pocoo.org/2.3/)

content/posts/2018-10-31-running-expo-react-native-in-docker/index.md

@@ -191,7 +191,7 @@ An example `.env` file used to pass environment variables (using docker-compose)
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-10-31-running-expo-react-native-in-docker/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-10-31-running-expo-react-native-in-docker/source_code)
 - [Docker explained](https://medium.freecodecamp.org/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b)
 - [GitHub issue around could not connect errors](https://github.com/react-community/create-react-native-app/issues/81)
 - [Genymotion emulator](https://www.genymotion.com/)

content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md

@@ -125,5 +125,5 @@ The part of our code is the actual test. It sends "Hello World" to the TCP serve
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-05-pytest-with-background-thread-fixtures/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-05-pytest-with-background-thread-fixtures/source_code)
 - [Pytest](https://docs.pytest.org/en/latest/)

content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md

@@ -229,4 +229,4 @@ docker run -d --name postgres -p 5432:5432 \
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/source_code)

content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md

@@ -308,6 +308,6 @@ curl -XPOST -H "Content-type: application/json" -d \
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/source_code)
 - [Postman](https://www.getpostman.com/)
 - [Insomnia](https://insomnia.rest/)

content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md

@@ -125,4 +125,4 @@ pytest
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/source_code)

content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md

@@ -376,7 +376,7 @@ look at how you can do this. An example of it working can be found [here](https:
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/source_code)
 - [React Navigation](https://reactnavigation.org/)
 - [Redux Animation](https://css-tricks.com/learning-react-redux/)
 - [Redux Diagram](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#)

content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md

@@ -371,7 +371,7 @@ export default class Settings extends Component {
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/source_code)
 - [React Navigation](https://reactnavigation.org/)
 - [Genymotion emulator](https://www.genymotion.com/)
 - GIFs created with [screentogif](https://www.screentogif.com/)

content/posts/2019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md

@@ -638,7 +638,7 @@ CRUD (Create Read Update Delete) operation and endpoints defined in the OAS.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/source_code)
 - [OpenAPI](https://swagger.io/docs/specification/about/)
 - [Swagger Codegen](https://github.com/swagger-api/swagger-codegen)
 - [Swagger Editor](https://editor.swagger.io/)

content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md

@@ -56,6 +56,6 @@ Then you should see something like the image below instead of the default green
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/source_code)
 - [Android Asset Studio](https://romannurik.github.io/AndroidAssetStudio/index.html)
 - [Cover Photo from UpLabs](https://www.uplabs.com/posts/adaptive-icons-for-android-o)

content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md

@@ -480,4 +480,4 @@ Here is a GIF of the app running.
 That's it we successfully created an app that auto changes the user's theme depending on
 the time of day, using the user's location to determine sunrise and sunset.
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/source_code)

content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md

@@ -473,5 +473,5 @@ Firebase (with authentication).
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/source_code)
 - [Example Firebase project](https://gitlab.com/hmajid2301/stegappasaurus-api)

content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md

@@ -332,5 +332,5 @@ they set last time, such as dark mode instead of the light mode.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-04-05-using-react-hooks-context-local-storage/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-04-05-using-react-hooks-context-local-storage/source_code)
 - Photo by [Cristian Palmer](https://unsplash.com/@cristianpalmer) on Unsplash

content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md

@@ -107,5 +107,5 @@ to be syntax highlighted.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/source_code)
 - [Example Project](https://composerisation.haseebmajid.dev/#yaml)

content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md

@@ -365,4 +365,4 @@ web service.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/source_code)

content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md

@@ -231,4 +231,4 @@ and `postgres` and you wanted to run your tests within the `flask` container. Bu
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/source_code)

content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/index.md

@@ -451,4 +451,4 @@ That's it! We managed to get Storybook to work with Gatsby. Where Gatsby is usin
 - [Example Project](https://gitlab.com/hmajid2301/personal-site/-/tree/e415420744b2a8f49eddaf2d3058b23c70f46638/.storybook)
 - [Example Storybook](https://storybook.haseebmajid.dev/)
 - Cover image from, [World Vector Logo](https://worldvectorlogo.com/downloaded/storybook-1)
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/source_code)

content/posts/2020-07-20-how-to-use-storybooks-with-mdx/index.md

@@ -732,4 +732,4 @@ for reading!
 ## Appendix
 
 - [Example Project](https://gitlab.com/hmajid2301/personal-site/-/tree/e415420744b2a8f49eddaf2d3058b23c70f46638/.storybook)
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/source_code)

content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/index.md

@@ -566,6 +566,6 @@ And that's it! We successfully added search to our `Gatsby` blog alongside searc
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/source_code)
 - [Example Project](https://gitlab.com/hmajid2301/personal-site/-/blob/d5f413310d4404fc6a1761a592f5e10840fc30df/src/components/organisms/SearchBar/SearchBar.tsx)
 - [Cover Photo by Markus Winkler](https://unsplash.com/@markuswinkler?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/index.md

@@ -252,6 +252,6 @@ the markdown files exist. They can then perhaps fork the project make their edit
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/source_code)
 - [Site in video](https://haseebmajid.dev/)
 - [Source code](https://gitlab.com/hmajid2301/portfolio-site) for site in video

content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/index.md

@@ -284,6 +284,6 @@ can also automate the rebuild of our site using Gitlab CI and Netlify.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/source_code)
 - Example [Gatsby blog](https://gitlab.com/hmajid2301/portfolio-site/-/tree/7258fe7ca1366024f17da5952077cdc00f00a3a8) repo
 - Example [Articles](https://gitlab.com/hmajid2301/articles) repo

content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/index.md

@@ -425,4 +425,4 @@ browsing the site on a Laptop/Desktop.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/source_code)

content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/index.md

@@ -467,7 +467,7 @@ And voila you now have a working web service you have created using Fizz. That's
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/source_code)
 - [Fizz](https://github.com/wI2L/fizz/)
 - [Tonic](https://github.com/loopfz/gadgeto/tree/master/tonic)
 - [Juju's Errors](https://github.com/juju/errors)

content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/index.md

@@ -293,6 +293,6 @@ That's it, quite simple to add Cypress tests that run in our CI pipeline.
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/source_code)
 - [Cypress](http://cypress.io/)
 - [Example Job](https://gitlab.com/hmajid2301/portfolio-site/-/jobs/1080367107)

content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/index.md

@@ -400,7 +400,7 @@ That's it, the code itself is fairly simple once everything is setup in `conftes
 
 ## Appendix
 
-- [Example source code](/https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/source_code)
+- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/source_code)
 - [Github Issue: UvicornTestServer](https://github.com/miguelgrinberg/python-socketio/issues/332#issuecomment-712928157)
 - [Async Create Task SO](https://stackoverflow.com/questions/62528272/what-does-asyncio-create-task-do)
 - [Real application using this testing pattern](https://gitlab.com/banter-bus/banter-bus-core-api)

content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/index.md

@@ -1,6 +1,6 @@
 ---
 title: Why I moved from Gatsby to Hugo for this blog?
-canonicalURL: https://haseebmajid.dev/posts/why-i-moved-from-gatsby-to-hugo-for-this-blog?/
+canonicalURL: https://haseebmajid.dev/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog?/
 date: 2022-11-17
 tags:
   - hugo
@@ -22,18 +22,18 @@ websites thrown together. It was a great way to learn React, TailwindCSS and a b
 
 - [Hugo](https://gohugo.io/)
 	- [PaperModX Theme](https://github.com/hmajid2301/hugo-PaperModX)
-		- My own fork (of a fork of a fork)
+		- My fork (of a fork, of a fork)
 - [Goatcounter](https://www.goatcounter.com/) for Analytics
 - Hosted by [Netlify](https://www.netlify.com/)
 - Using [NetlifyCMS](https://www.netlifycms.org) for content management
 
-## Why Move to Hugo ? 
+## Why Move to Hugo? 
 
 I also had a bunch of issues even building the [site recently](https://gitlab.com/hmajid2301/portfolio-site/-/pipelines).
-I had a schedule job to rebuilt it so that the stats page would update with the most viewed articles etc.
+I had a scheduled job to rebuild it so that the stats page would update with the most viewed articles etc.
 The final straw for me was not being to easily add a new page for talks. I recently was lucky enough to give a
 talk at Europython and wanted to share that on my website but realised with my old Gatsby site that would be a bit of
-a pain to add. I could also no longer easily upgrade my site to the latest version of Gatsby v4 due to old
+a pain to add. I could also no longer easily upgrade my site to the latest version of Gatsby v4 due to the old
 plugins I relied on.
 Mostly it was essentially an issue with me, that I no longer wanted to put in the effort to maintain the site.
 
@@ -42,10 +42,10 @@ learning Golang and decided to take a look at Hugo. One thing I noticed right aw
 build the site. Roughly speaking the old site used to take ~120 seconds to build and this site takes < 1 second.
 
 Anecdotally I noticed the hot reloader seems to work better but again I was using a v2 of Gatsby.
-Overally I am pretty happy with this new site. Using hugo archetypes and page-bundles. I have moved
+Overall I am pretty happy with this new site. Using Hugo archetypes and page-bundles. I have moved
 all of my articles within this repo, making it far easier to create new blog posts and test draft posts.
 
-So hopefully I will be blogging more often 🤣 (I'm looking at you 2 posts in 2022, as of time of writing)!
+So hopefully I will be blogging more often 🤣 (I'm looking at you 2 posts in 2022, as of the time of writing)!
 
 ## 👴 Older iterations:
 

content/posts/2022-11-20-til-how-you-can-add-goatcounter-to-your-hugo-blog/index.md

@@ -39,18 +39,18 @@ Next, go look for a file which is used as the template for all of our pages.
 In my case, it is located at `layouts/_default/baseof.html` and add the
 following just above your footer:
 
-{{< highlight html "hl_lines=5-7" >}}
-    {{- partialCached "header.html" . .Page -}}
-    <main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">
-        {{- block "main" . }}{{ end }}
-    </main>
-    {{- if .Site.Params.goatcounter }}
-        {{ partial "analytics.html" . -}}
-    {{- end}}
-    {{ partial "footer.html" . -}}
-    {{- partial "search.html" . -}}
-    {{- block "body_end" . }}
-{{< /highlight >}}
+```go-html-template {hl_lines=["5-7"]}
+  {{- partialCached "header.html" . .Page -}}
+  <main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">
+      {{- block "main" . }}{{ end }}
+  </main>
+  {{- if .Site.Params.goatcounter }}
+      {{ partial "analytics.html" . -}}
+  {{- end}}
+  {{ partial "footer.html" . -}}
+  {{- partial "search.html" . -}}
+  {{- block "body_end" . }}
+```
 
 {{< notice type="tip" title="File Names"  >}}
 Note here the file location and name here `{{ partial "analytics.html" . -}}`, matches what I said above.

content/posts/2022-11-22-til-you-can-add-a-custom-domain-to-your-goatcounter-site/index.md

@@ -1,6 +1,6 @@
 ---
 title: "TIL: You can add a custom domain to your Goatcounter site"
-canonicalURL: https://haseebmajid.dev/posts/til-you-can-add-a-custom-domain-to-your-goatcounter-site/
+canonicalURL: https://haseebmajid.dev/posts/2022-11-22-til-you-can-add-a-custom-domain-to-your-goatcounter-site/
 date: 2022-11-22
 tags:
   - goatcounter