diff --git a/Taskfile.yml b/Taskfile.yml index ddf1be0..9fc2bad 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -7,7 +7,7 @@ tasks: start_server: cmds: - - hugo server -D + - hugo server -D --buildFuture new_post: cmds: diff --git a/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md b/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md index 571dd06..8259211 100644 --- a/content/posts/2018-10-18-inheritance-in-sqlalchemy-with-flask/index.md +++ b/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]() +- [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/) diff --git a/content/posts/2018-10-31-running-expo-react-native-in-docker/index.md b/content/posts/2018-10-31-running-expo-react-native-in-docker/index.md index 7541d52..e3cddec 100644 --- a/content/posts/2018-10-31-running-expo-react-native-in-docker/index.md +++ b/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/) diff --git a/content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md b/content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md index 1ca7eb7..9c984a9 100644 --- a/content/posts/2018-11-05-pytest-with-background-thread-fixtures/index.md +++ b/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/) \ No newline at end of file diff --git a/content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md b/content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md index 4e8edaa..9e53659 100644 --- a/content/posts/2018-11-19-using-multiple-docker-containers-to-setup-nginx-flask-and-postgres/index.md +++ b/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) \ No newline at end of file +- [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) \ No newline at end of file diff --git a/content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md b/content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md index 180c2b7..71d318d 100644 --- a/content/posts/2018-11-24-building-a-simple-flask-app-with-sqlalchemy-and-docker/index.md +++ b/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/) diff --git a/content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md b/content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md index f3156a5..9385716 100644 --- a/content/posts/2018-12-15-testing-a-flask-app-with-pytest-mock-and-pytest-flask/index.md +++ b/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) diff --git a/content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md b/content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md index cb900b5..b80810a 100644 --- a/content/posts/2018-12-23-theme-your-expo-react-native-app-with-redux-and-react-navigation/index.md +++ b/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#) diff --git a/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md b/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md index 76bb1b2..e4a9ddd 100644 --- a/content/posts/2019-03-04-drawernavigator-tabnavigator-and-stacknavigator-with-react-navigation/index.md +++ b/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/) diff --git a/content/posts/2019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md b/content/posts/2019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md index 441b694..b4ed40e 100644 --- a/content/posts/2019-08-16-creating-a-simple-restful-app-using-openapi-flask-connexions/index.md +++ b/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/) diff --git a/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md b/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md index dc71f42..15b6b65 100644 --- a/content/posts/2019-11-09-add-adaptive-icons-to-your-android-app/index.md +++ b/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) diff --git a/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md b/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md index 7d957f4..a0ece2d 100644 --- a/content/posts/2020-01-25-auto-toggle-dark-theme-on-your-react-native-app/index.md +++ b/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) \ No newline at end of file +- [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) \ No newline at end of file diff --git a/content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md b/content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md index 92e867a..8c8a0f0 100644 --- a/content/posts/2020-02-22-using-react-native-with-firebase-cloud-functions-and-gitlab-ci/index.md +++ b/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) diff --git a/content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md b/content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md index c00f6b4..c74bc04 100644 --- a/content/posts/2020-04-05-using-react-hooks-context-local-storage/index.md +++ b/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 diff --git a/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md b/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md index fe9057d..2cd931c 100644 --- a/content/posts/2020-05-10-how-to-make-prismjs-code-blocks-editable/index.md +++ b/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) diff --git a/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md b/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md index 5b58ff4..f79a269 100644 --- a/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/index.md +++ b/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) \ No newline at end of file +- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-06-09-testing-a-connexion-flask-application-with-pytest/source_code) \ No newline at end of file diff --git a/content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md b/content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md index 653762e..1e23055 100644 --- a/content/posts/2020-06-22-how-to-use-gitlab-ci-pytest-and-docker-compose-together/index.md +++ b/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) \ No newline at end of file +- [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) \ No newline at end of file diff --git a/content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/index.md b/content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/index.md index ad343f3..efb4873 100644 --- a/content/posts/2020-06-29-how-to-use-storybooks-gatsby-babel-tailwind-typescript-together/index.md +++ b/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) \ No newline at end of file +- [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) \ No newline at end of file diff --git a/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/index.md b/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/index.md index c236131..6a968e2 100644 --- a/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/index.md +++ b/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) \ No newline at end of file +- [Example source code](https://gitlab.com/hmajid2301/blog/-/tree/main/content/posts/2020-07-20-how-to-use-storybooks-with-mdx/source_code) \ No newline at end of file diff --git a/content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/index.md b/content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/index.md index a7d0062..8bac2d0 100644 --- a/content/posts/2020-08-20-how-to-add-offline-search-to-a-gatsby-blog/index.md +++ b/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) diff --git a/content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/index.md b/content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/index.md index ecb4a7b..9af524c 100644 --- a/content/posts/2020-09-07-add-an-edit-post-button-to-your-gatsby-blog/index.md +++ b/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 diff --git a/content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/index.md b/content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/index.md index 64f594c..ef1b646 100644 --- a/content/posts/2020-09-18-how-to-source-your-gatsby-posts-from-another-repo/index.md +++ b/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 diff --git a/content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/index.md b/content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/index.md index a18d44c..3121612 100644 --- a/content/posts/2020-11-11-how-to-add-a-toc-in-gatsby/index.md +++ b/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) diff --git a/content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/index.md b/content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/index.md index cc34174..5fc4313 100644 --- a/content/posts/2021-01-19-how-to-create-a-golang-web-application-using-fizz/index.md +++ b/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) diff --git a/content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/index.md b/content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/index.md index 9cafed2..8f83bf9 100644 --- a/content/posts/2021-03-22-testing-a-gatsby-application-with-cypress-on-gitlab-ci/index.md +++ b/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) diff --git a/content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/index.md b/content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/index.md index 5e2a0b6..11f9ffe 100644 --- a/content/posts/2021-12-23-testing-a-socketio-web-app-written-in-python/index.md +++ b/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) diff --git a/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/images/cover.png b/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/images/cover.png new file mode 100644 index 0000000..91242c2 --- /dev/null +++ b/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/images/cover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1d3f2f277a9fbef4a3a1680e157de41160f8832ff0786f3383336c69f8277d79 +size 355695 diff --git a/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/index.md b/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/index.md index a10d76f..4174770 100644 --- a/content/posts/2022-11-17-why-i-moved-from-gatsby-to-hugo-for-this-blog/index.md +++ b/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: diff --git a/content/posts/2022-11-20-til-how-you-can-add-goatcounter-to-your-hugo-blog/index.md b/content/posts/2022-11-20-til-how-you-can-add-goatcounter-to-your-hugo-blog/index.md index d9419a0..6db01d1 100644 --- a/content/posts/2022-11-20-til-how-you-can-add-goatcounter-to-your-hugo-blog/index.md +++ b/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 -}} -
- {{- block "main" . }}{{ end }} -
- {{- 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 -}} +
+ {{- block "main" . }}{{ end }} +
+ {{- 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. diff --git a/content/posts/2022-11-22-til-you-can-add-a-custom-domain-to-your-goatcounter-site/index.md b/content/posts/2022-11-22-til-you-can-add-a-custom-domain-to-your-goatcounter-site/index.md index 7258c66..1ac9df1 100644 --- a/content/posts/2022-11-22-til-you-can-add-a-custom-domain-to-your-goatcounter-site/index.md +++ b/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 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/cover.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/cover.png new file mode 100644 index 0000000..473b956 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/cover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8fca105b8933374edaf105a67cb62e0c49db0b6918238cbf772c3d194bdb3061 +size 378450 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr.png new file mode 100644 index 0000000..285f174 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c593bbf9011e661bdf72345375b9aaab9c4c20bde7b24c2657642c4ad67d48b9 +size 47940 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr_preview.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr_preview.png new file mode 100644 index 0000000..d36bf58 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/gitlab_mr_preview.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ac7b3cbc4f7cd99477a55af366a4df5f2221d3fcb4efcfb85bb32e4e4fda4ea4 +size 79135 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_blog.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_blog.png new file mode 100644 index 0000000..df40893 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_blog.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:928d42a4512ff1ed0ba873b598e15b43a8a70e32b6100daf7a12308e49b8b25c +size 29990 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_editorial.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_editorial.png new file mode 100644 index 0000000..030baea --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_cms_editorial.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0e65628dbde72b0892d8f699062d030312229d3c1f09aa61ccb3e08b3e2917b5 +size 61917 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_notifications.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_notifications.png new file mode 100644 index 0000000..5123703 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_notifications.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:70b72399c51a04c726acbdff334efe63e97b7a0107680b9adf0d3aafe0c481d9 +size 37228 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_settings.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_settings.png new file mode 100644 index 0000000..0d49a9c --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_deploy_settings.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8f1065e8426d5496145949f3d7171bbcd2430b8edefabff28fac6bede59fda14 +size 200419 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_plugins.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_plugins.png new file mode 100644 index 0000000..36e4762 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_plugins.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:64c4408e4132e9eb22f9f20df8c07d989188697810e1291b847eacf5bbca003d +size 198342 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_team.png b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_team.png new file mode 100644 index 0000000..628bc12 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/images/netlify_team.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:73afd0b8f286816afaf55b8a0698da7d7da54524ee17e0a41d1f0b3b31ee3787 +size 75744 diff --git a/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/index.md b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/index.md new file mode 100644 index 0000000..7a10603 --- /dev/null +++ b/content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/index.md @@ -0,0 +1,331 @@ +--- +title: My Workflow To Create a New Post Using Hugo, Netlifycms, Netlify and Gitlab Together +canonicalURL: https://haseebmajid.dev/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/ +date: 2022-12-03 +tags: + - hugo + - netlify + - gitlab + - netlifycms + - vscode +cover: + image: images/cover.png +--- + +In this post, I will go over my new workflow for creating articles/posts that I now use with +my new (Hugo) blog. Though I'm sure much of this will apply to other JAM stack sites as well. + +{{< notice type="warning" title="Hugo Site" >}} +Before carrying on, this post assumes you have an existing Hugo blog. + +My Hugo blog setup looked something like this: + +```bash +├── archetypes +├── config.yml +├── content +├── docker-compose.yml +├── Dockerfile +├── go.mod +├── README.md +├── resources +├── static +├── Taskfile.yml +└── themes +``` + +We also assume you are using [page bundles](https://gohugo.io/content-management/page-bundles/). +{{< /notice >}} + +## Netlify + +First, let's use Netlify to deploy our website. Netlify is a great website that allows +us to deploy our Hugo blog for free. It has a very generous free tier. At the time of writing +100 GB bandwidth per month and 300 build minutes. To be honest my blog is more +than enough and if we ever need more at that point I can probably afford to pay for the +premium tiers. + +Netlify makes it dead simple to deploy our Hugo blog all we need to do is link our Git repo, +which in our case is on [Gitlab](https://gitlab.com/hmajid2301/blog). + +First, create a Netlify account if you need to, and then it will ask you to create a new team. +A project will belong to a team, you can add other users to the team. Allowing them to +manage the site on Netlify as well. In my case, I am the only one in my team as it is for my +blog. + +![Netlify Sites](images/netlify_team.png) + +You can add a new site; link it to your Gitlab repository. It will be set up to automatically +deploy all changes from the main/master branch. So anytime you make a commit to your main branch. +Netlify will redeploy your website. Which is exactly what we want. Especially since Hugo +websites tend to build quite fast, we are unlikely to use the full 300 build minutes in Netlify. + +I used to use Gitlab to build and deploy my site but now Gitlab has restricted the build minutes +per month by a lot. So I let Netlify deploy for us. My deploy settings look like this: + +![Netlify Deploy Settings](images/netlify_deploy_settings.png) + +One plugin I'd recommend which I think speeds up builds on Netlify is `Hugo cache resources`. + +![Netlify Plugins](images/netlify_plugins.png) + +### Identity + +We will need to enable identity to restrict access to the CMS. To turn on identity do the following: + +- Go to Settings > Identity, and select Enable Identity service. +- Once enabled, select Settings and usage, and scroll down to Registration preferences. You can set this to either Open or Invite only, but usually Invite only is your best bet for a personal site. +- If you don't want to create an account, or would like to use an external provider such as GitHub or Google, you can enable those services under External providers. +- Scroll down to Services and click Enable Git Gateway. + +We will need to use this later after we've set up NetlifyCMS. + +### Netlify Preview + +One setting you may have noticed that we turned on is using deploy previews. Which allows us to + +> Deploy Previews allow you and your team to experience changes to any part of your site without having to publish them to production. - Netlify + +This great feature will provide us with a unique deploy link in each of our merge requests +we create on Gitlab. So we can preview the website without needing to commit to the main +branch. Which has helped me catch a bunch of issues with my site. + +Make sure to have this notification set up (also in the `Build & Deploy` settings in the screenshots above). + +![Deploy Notifications](images/netlify_deploy_notifications.png) + +We will see in a bit more detail how this is used later on. + +## Netlify CMS + +Now that we have our blog deploying using Netlify. Let's look at setting up Netlify CMS. +Netlify CMS is an "Open source content management for your Git workflow". It super easy to +setup and will integrate very nicely with our site. + +### Page Bundles + +Before we look at how we can add Netlify CMS to our Hugo blog. First, let's quickly look at +(leaf) page bundles. I like using page bundles because it allows me to keep related to a post. For example the project structure +would look like this: + +```bash +content/posts/2022-08-08-running-gitlab-ci-jobs-in-docker-using-docker-compose/ +├── images +│ └── cover.png +└── index.md +``` + +You can see we have the image associated with this page as a subdirectory and the content of the post is in the `index.md` file. +For every post, all the associated files/content are within their own folder and it is nice and contained. + +{{< notice type="tip" title="URL" >}} +The folder path here `content/posts/2022-08-08-running-gitlab-ci-jobs-in-docker-using-docker-compose/`. This page would +then be accessed at +[https://haseebmajid.dev/posts/2022-08-08-running-gitlab-ci-jobs-in-docker-using-docker-compose/](https://haseebmajid.dev/posts/2022-08-08-running-gitlab-ci-jobs-in-docker-using-docker-compose/). +{{< /notice >}} + +[Example page bundle here](https://gitlab.com/hmajid2301/blog/-/tree/51e1231b2d0f94e6d8a0158dd3c34a8ffe84a896/content/posts/2022-11-15-til-you-can-hash-none-in-python-what) + +The only reason I mention page bundles is that to use Hugo page bundles with Netlify CMS we will have to adjust the Netlify CMS configuration a bit. + +### Setup CMS + +Now let's add [Netlify CMS](https://www.netlifycms.org/docs/hugo/) to our blog. + +In your `static` folder create a new folder called `admin` i.e. `static/admin/`. + +#### config.yml + +Create a new file called `static/admin/config.yml`, which looks like this: + +```yml {hl_lines=[7,11,13,17]} +backend: + name: git-gateway + branch: main + use_large_media_transforms_in_media_library: false +media_folder: static/images +public_folder: /images +publish_mode: editorial_workflow +collections: + - name: "blog" + label: "Blog" + folder: "content/posts" + # Support Hugo page bundles that puts index.md and images in folders named by slug + path: "{{slug}}/index" + media_folder: "images" + public_folder: "images" + create: true + slug: "{{fields.date}}-{{slug}}" + editor: + preview: true + fields: + - { label: "Title", name: "title", widget: "string" } + - { label: "Canonical URL", name: "canonicalURL", widget: "hidden" } + - { + label: "Publish Date", + name: "date", + widget: "date", + format: "YYYY-MM-DD", + } + - { label: "Tags", name: "tags", widget: "list", allow_add: true } + - { label: "Series", name: "series", widget: "list", allow_add: true } + - label: "Cover" + name: "cover" + widget: "object" + collapsed: true + fields: + - { + label: "Image", + name: "image", + default: "images/cover.png", + widget: "string", + } + - { + label: "Images", + name: "thumbnail", + widget: "image", + choose_url: true, + required: false, + media_library: { config: { multiple: true } }, + } + - { label: "Body", name: "body", widget: "markdown" } +``` + +I have highlighted some lines of interest in that file. + +- `backend.branch`: Change this to the name of the main branch of your git repository on Gitlab i.e. `master`. +- `publish_mode: editorial_workflow`: This setting means when we make changes on the Netlify CMS i.e. create a new post it will create a new MR, this helps to keep the main branch git history nicer. It also allows you to review the post before it goes out. You can see this in the photos below. +- `folder: "content/posts"`: Here we specify where to create new posts in. +- `path: "{{slug}}/index"`: Here is where we specify the page bundle part it will create the markdown file using the slug i.e. title and date and create an index.md file. For example, if our post title was `My Workflow To Create a New Post Using Hugo, Netlifycms, Netlify and Gitlab Together` we would create a file at `content/posts/2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together/index.md`. +- `slug: "{{fields.date}}-{{slug}}"`: Then we specify the slug which essentially is the name of the file created. Here we specify to use the date combined with the slug. For example, like this `2022-12-03-my-workflow-to-create-a-new-post-using-hugo,-netlifycms,-netlify-and-gitlab-together`. + + +![Netlify CMS Editorial](images/netlify_cms_editorial.png) + +##### fields + +Finally, the fields section is what will be used to fill the frontmatter of our post I want it to be something like this: + +```md +--- +title: "TIL: How you can add goatcounter to your Hugo blog" +canonicalURL: https://haseebmajid.dev/posts/2022-11-20-til-how-you-can-add-goatcounter-to-your-hugo-blog/ +date: 2022-11-20 +tags: + - hugo + - blog + - goatcounter +series: + - TIL + - Goatcounter with Hugo +cover: + image: images/cover.png +--- +``` + +Note `canonicalURL` is dynamically created and we will see how this is created, hence it is a `hidden` field which we cannot edit within NetlifyCMS. +The fields look like this: + +![Netlify CMS Blog Post](images/netlify_cms_blog.png) + +Note to have nested fields in `frontmatter` we can do something like this: + +```yml +- label: "Cover" + name: "cover" + widget: "object" + collapsed: true + fields: + - { + label: "Image", + name: "image", + default: "images/cover.png", + widget: "string", + } +``` + +To get `cover.images: images/cover.png`. You will need to set the fields as you need them to be for your front matter. + +#### index.html + +Create a new file called `static/admin/index.html`, which looks like this: + +```html + + + + + + Content Manager + + + + + + + + + +``` + +Now as stated above I wanted to dynamically set the `canonicalURL` when the file was created we do this using this in the script section. +We use the `preSave` hook provided to us by the NetlifyCMS library. Where we get the slug before the file is saved and concat it with the current +date. This is not ideal however as now if we change how the file name is generated above in the `config.yaml` (`slug: "{{fields.date}}-{{slug}}"`), +we will have to adjust our logic here as well. I will see if I can come up with a better way to do this. + +## Gitlab + +We don't have to do anything in Gitlab, what will happen when we create a new blog post is that a new MR will be created. +It will start with the `draft` tag and change as we move the posts into the different sections in our workflow (see the image above), +`Drafts`, `In Review` and `Ready`. When we publish the post it will auto-merge the MR in Gitlab. + +![Netlify CMS Gitlab MR](images/gitlab_mr.png) + +Since we turned on deploy previews on MRs we will also get to preview the website, this allows us to preview the website before merging to the main branch. + +![Gitlab MR Preview](images/gitlab_mr_preview.png) + +I have also editted my `netlify.toml` file with the following command `--buildFuture`, so I can also preview posts that will be published +in the future. + +```toml +[context.deploy-preview] +command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL" +``` + +## Putting it all together + +Now let's put this all together to access Netlify CMS go to your website `/admin` (after you've deployed your changes). +So in my case, it would be `https://haseebmajid.dev/admin`, log in with your relevant account i.e. Gitlab or Github, depending on what +was enabled in your identity settings. + +Then create a new post, after you have clicked save it will get moved to draft and create an MR on GitLab. After a few minutes, you +should see a preview environment as a comment from Netlify to preview your site. After you publish the post or merge the MR. The +post your site will start to deploy via Netlify. + +{{< gfycat src="flamboyantillustriousgiantschnauzer" >}} + +## Appendix + +- [My site using this workflow](https://gitlab.com/hmajid2301/blog/-/tree/e2722a7ca4a93fd37cb70663189295e534a5a49) +- [Official Netlify CMS Hugo Integration Docs](https://www.netlifycms.org/docs/hugo/) \ No newline at end of file diff --git a/content/uses/index.md b/content/uses/index.md index 27b2926..61335f7 100644 --- a/content/uses/index.md +++ b/content/uses/index.md @@ -66,47 +66,10 @@ My Backup strategy is as follows: - `docker kill (docker ps -q) $argv`: Kill all running Docker containers - `docker rm (docker ps -a -q) $argv`: Remove all killed Docker containers -# About This Site +## Websites -This site was built with [hugo](https://gohugo.io/) and the [PaperModX Theme](https://github.com/hmajid2301/hugo-PaperModX) (using a fork of a fork at the moment). +### Privacy Focused -I decided to go with an existing theme rather than creating my own this time, to one save time but also to give the -site a more consistent feel. I am no designer and I felt my last website (v3), really felt like a bunch of different -websites thrown together. It was a great way to learn React, TailwindCSS and a bunch of other technologies. - -## Technologies Used - -- [Hugo](https://gohugo.io/) - - [PaperModX Theme](https://github.com/hmajid2301/hugo-PaperModX) - - My own 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 ? - -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. -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 -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. - -So I decided to take a look at something easier to maintain but that would still look great. I have been -learning Golang and decided to take a look at Hugo. One thing I noticed right away was how fast it was to -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 -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)! - -## 👴 Older iterations: - -You can find older iterations of this site here: - -- [Version 1](https://v1.haseebmajid.dev) -- [Version 2](https://v2.haseebmajid.dev) -- [Version 3](https://v3.haseebmajid.dev) +- [whoogle](https://github.com/benbusby/whoogle-search): Google frontend without ads, tracking etc +- [Invidious](https://invidious.io/): Open source youtube front-end +- [Goatcounter](goatcounter.com): Website analytics tools, without tracking diff --git a/static/admin/index.html b/static/admin/index.html index 5761174..81fec65 100644 --- a/static/admin/index.html +++ b/static/admin/index.html @@ -13,17 +13,23 @@ \ No newline at end of file diff --git a/themes/PaperModX b/themes/PaperModX index 3ff0e67..04a7a7a 160000 --- a/themes/PaperModX +++ b/themes/PaperModX @@ -1 +1 @@ -Subproject commit 3ff0e6732292b7d122cb978d46221196b597232c +Subproject commit 04a7a7a9b6eb76ddfe312d3639f1bf21b2f9c39a