From c308e96d125e7d421d1df9f243ce35aba4d8d338 Mon Sep 17 00:00:00 2001 From: Ian Andwati Date: Fri, 21 Apr 2023 13:41:38 +0300 Subject: [PATCH] polishing --- .../post/{ => 2022/november}/hello-world.md | 30 +-- .../post/2022/november/integrating-netlify.md | 187 ++++++++++++++++++ ...tgresql-15-on-arch-manjaro-garuda-linux.md | 0 content/post/semantic-versioning.md | 120 ----------- 4 files changed, 195 insertions(+), 142 deletions(-) rename content/post/{ => 2022/november}/hello-world.md (76%) create mode 100644 content/post/2022/november/integrating-netlify.md create mode 100644 content/post/2023/feb/install-postgresql-15-on-arch-manjaro-garuda-linux.md delete mode 100644 content/post/semantic-versioning.md diff --git a/content/post/hello-world.md b/content/post/2022/november/hello-world.md similarity index 76% rename from content/post/hello-world.md rename to content/post/2022/november/hello-world.md index ba0b37c..26a24ea 100644 --- a/content/post/hello-world.md +++ b/content/post/2022/november/hello-world.md @@ -1,18 +1,15 @@ --- -title: "My 1st post" -date: 2023-04-21 -# weight: 1 -# aliases: ["/first"] -tags: ["first"] -author: "Me" -# author: ["Me", "You"] # multiple authors +title: "Hello World" +date: 2022-11-04 +tags: ["hugo, blog, Go"] +author: "Ian Andwati" showToc: true TocOpen: false draft: false hidemeta: false comments: false -description: "Desc Text." -canonicalURL: "https://canonical.url/to/page" +description: "Integrating netlify cms." +canonicalURL: "" disableHLJS: true # to disable highlightjs disableShare: false disableHLJS: false @@ -24,16 +21,10 @@ ShowPostNavLinks: true ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true -cover: - image: "" # image path/url - alt: "" # alt text - caption: "" # display caption under cover - relative: false # when using page bundles set this to true - hidden: true # only hide on current single page editPost: - URL: "https://github.com//content" + URL: "https://github.com/andwati/content" Text: "Suggest Changes" # edit text - appendFilePath: true # to append file path to Edit link +appendFilePath: true # to append file path to Edit link --- How it begins @@ -63,8 +54,3 @@ Hugo is one of the most popular open-source static site generators. With its ama The site is hosted on github pages as evident by the \*.github.io domain name.I prefer this mainly because it is free and I don't have to switch to a different hosting provider. - -```python -def hello_world: - retun "Hello World" -``` diff --git a/content/post/2022/november/integrating-netlify.md b/content/post/2022/november/integrating-netlify.md new file mode 100644 index 0000000..559f3d7 --- /dev/null +++ b/content/post/2022/november/integrating-netlify.md @@ -0,0 +1,187 @@ +--- +title: "Integrating Netlify CMS" +date: 2022-11-24T15:34:14.160Z +# weight: 1 +# aliases: ["/first"] +tags: ["blog", "hugo", "netlify","netlify-cms","github"] +author: "Ian Andwati" +showToc: true +TocOpen: false +draft: false +hidemeta: false +comments: false +description: "Integrating netlify cms." +canonicalURL: "" +disableHLJS: true # to disable highlightjs +disableShare: false +disableHLJS: false +hideSummary: false +searchHidden: true +ShowReadingTime: true +ShowBreadCrumbs: true +ShowPostNavLinks: true +ShowWordCount: true +ShowRssButtonInSectionTermList: true +UseHugoToc: true +cover: + image: "" # image path/url + alt: "" # alt text + caption: "" # display caption under cover + relative: false # when using page bundles set this to true + hidden: true # only hide on current single page +editPost: + URL: "https://github.com/andwati/content" + Text: "Suggest Changes" # edit text + appendFilePath: true # to append file path to Edit link +--- + +Migrating to a better content management system through Netlify CMS + + + +# Heavy Lifting + +I use [Visual Studio Code](https://code.visualstudio.com/) to manually edit the blog post content on this website. This is quite a hassle because I have to deal with +markdown files. There are many problems with this approach and several gotchas. I have to work on a local site repository to be able to edit the content. My GitHub credentials are also required to push my local changes to my remote repository on GitHub so that it can trigger the build process and publish the site. + +This process has helped me a lot to master markdown syntax and some practice on my git skills. It’s fun to update the website content following these steps but sometimes it can be frustrating. At those times, I really miss the user interface of content management systems. After careful consideration, I moved on with Netlify CMS. At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including: + +- **Fast, web-based UI:** With rich-text editing, real-time preview, and drag-and-drop media uploads. +- **Platform agnostic:** Works with most static site generators. +- **Easy installation:** Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN). +- **Modern authentication:** Using GitHub, GitLab, or Bitbucket and JSON web tokens. +- **Flexible content types:** Specify an unlimited number of content types with custom fields. +- **Fully extensible:** Create custom-styled previews, UI widgets, and editor plugins. + +# Redeploying to Netlify + +I decided to move the site from GitHub pages to Netlify hosting to take full control of the platform. Hugo sites on Netlify can benefit from automatic framework detection and control over Hugo version selection. When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Hugo, Netlify provides a suggested build command and publish directory: Hugo and public. The build process is straight forward but you can add custom options to your `netlify.toml` file, here are my options: + +```toml +[build] +command = "hugo" +publish = "public" + +[build.environment] +HUGO_VERSION = "0.105.0" +``` + +# Setting up Netlify CMS + +You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. The official documentation for installing on your website can be found at the [official site](https://www.netlifycms.org/docs/intro/) + +## Steps + +**Step 1** + +Create a static admin folder containing all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. For Hugo, it is the `static` folder. + +`/static/admin` + +**Step 2** + +Inside the admin folder, create two files: `index.html` and `config.yml`. The first file `admin/index.html` is an entry point to Netlify CMS. You will access the CMS interface from `yourwebsite.com/admin` when everything is ready. + +**Step 3** + +The first file, `admin/index.html`, is the entry point for the Netlify CMS admin interface. Paste this code in index.html and save. This HTML starter page will load the Netlify CMS Javascript file: + +```html + + + + + + Content Manager + + + + + + +``` + +**Step 4** + +Now let’s move to the configuration section. These are the configurations that go into the `config.yml` file. This process is different for every site. I followed the guidelines on the website and made minor adjustments. It worked on my website. The configuration options are available at the [docs](). This is how I configured my config.yml file: + +```yaml +backend: + name: git-gateway + branch: netlify-cms # Branch to update (optional; defaults to master) + +# This line should *not* be indented +publish_mode: editorial_workflow + +media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads +public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads + +collections: + - name: "post" # Used in routes, e.g., /admin/collections/blog + label: "posts" # Used in the UI + folder: "content/post" # The path to the folder where the documents are stored + create: true # Allow users to create new documents in this collection + slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md + fields: # The fields for each document, usually in front matter + - { label: "Layout", name: "layout", widget: "hidden", default: "blog" } + - { label: "Title", name: "title", widget: "string" } + - { label: "Draft", name: "draft", widget: "boolean", default: true } + - { label: "Publish Date", name: "date", widget: "datetime" } + - { label: "Last Modified", name: "lastmod", widget: "datetime" } + - { label: "Body", name: "body", widget: "markdown" } + - { label: "Keywords", name: "keywords", widget: "list" } + - { label: "Tags", name: "tags", widget: "list" } + - { label: "Categories", name: "categories", widget: "list" } + - { label: "Comments", name: "comment", widget: "boolean", default: true } + - { + label: "Table of Contents", + name: "toc", + widget: "boolean", + default: true, + } +``` + +**Step 5** + +**Authentication** + +Now that the Netlify CMS files are in place and configured, all that's left is to enable authentication. +Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general [Step-by-Step Guide](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/) for this, along with detailed guides for many popular static site generators + +Let’s first enable Netlify Identity and Git Gateway: + +- On your Netlify account, go to **Settings > Identity** and select **Enable Identity Service** +- Under **Registration preferences**, select **Invite Only**. +- If you want to enable login from external providers such as Google and GitHub, check the boxes you want to use, under **External Providers** section. I find it practical to log in with GitHub, so I added it. +- Go to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git Host and generates and API token. +- Everything is almost set up. What we need now is a front-end interface to connect. We will add the following script in two places, to include the **Netlify Identity Widget** on our website: + +```html + +``` + +We will use Netlify's [script injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection/) feature to add the script to our site. To use snippet injection, go to **Site Settings > Build & Deploy > Post processing**. Find the Snippet Injection section and select **Add Snippet**. Write a name for the script in the first box (e.g. Netlify Identity Widget). Paste the script inside the second box. Choose Insert before the `` option and save. + +Lastly, we will add the following script before the closing `` tag of our website’s main index page. This script allows the user to redirect back to the `/admin/` path after completing the login with the Netlify Identity Widget: + +```html + +``` + +**Step 5** + +Now we’re all set. Since we set our registration preferences to **“Invite Only”**, we need to invite ourselves as site users. To do this, select the Identity tab from the Netlify site dashboard and select the Invite Users button. Add your email address and send an invitation. You will receive an email. In your email, click **“accept the invitation”**. You will be directed to your website admin sign-up panel. Choose a password. Now you are ready to log in to Netlify CMS. + +# Setting up a custom domain + +I bought a custom domain from [Namecheap](https://namecheap.com), they provide some pretty good deals. After pointing the nameservers for the domain to the Netlify nameservers, voila! everything worked smoothly. For HTTPS support, Netlify enables automatic TLS certificates with Let’s Encrypt. diff --git a/content/post/2023/feb/install-postgresql-15-on-arch-manjaro-garuda-linux.md b/content/post/2023/feb/install-postgresql-15-on-arch-manjaro-garuda-linux.md new file mode 100644 index 0000000..e69de29 diff --git a/content/post/semantic-versioning.md b/content/post/semantic-versioning.md deleted file mode 100644 index fc17857..0000000 --- a/content/post/semantic-versioning.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: "My 1st post" -date: 2020-09-15T11:30:03+00:00 -# weight: 1 -# aliases: ["/first"] -tags: ["first"] -author: "Me" -# author: ["Me", "You"] # multiple authors -showToc: true -TocOpen: false -draft: false -hidemeta: false -comments: false -description: "Desc Text." -canonicalURL: "https://canonical.url/to/page" -disableHLJS: true # to disable highlightjs -disableShare: false -disableHLJS: false -hideSummary: false -searchHidden: true -ShowReadingTime: true -ShowBreadCrumbs: true -ShowPostNavLinks: true -ShowWordCount: true -ShowRssButtonInSectionTermList: true -UseHugoToc: true -cover: - image: "" # image path/url - alt: "" # alt text - caption: "" # display caption under cover - relative: false # when using page bundles set this to true - hidden: true # only hide on current single page -editPost: - URL: "https://github.com//content" - Text: "Suggest Changes" # edit text - appendFilePath: true # to append file path to Edit link ---- - -Adopting best practices in your git and build workflows. - - - -# What is Semver? - -Semantic versioning or just SemVer is a dependency naming guidline that aims to bring some sanity into naming libraries and packages in software development. It is a standard versioning system created by **Tom Preston Werner** (co-founder of Github) that’s used to communicate what changes are in a release. - -An efficient and smooth versioning becomes crucial for efficient software delivery expecially for projects that expose a public API. This saves the developers the chaos that is **dependency hell**.Dependency hell is a colloquial term for the frustration of some software users who have installed software packages which have dependencies on specific versions of other software packages. - -The dependency issue arises when several packages have dependencies on the same shared packages or libraries, but they depend on different and incompatible versions of the shared packages. If the shared package or library can only be installed in a single version, the user may need to address the problem by obtaining newer or older versions of the dependent packages. This, in turn, may break other dependencies and push the problem to another set of packages. - -## Semantic Versioning Specifications - -### Summary - -Semantic versioning is based on three numbers that indicate the versions of the software and the compatibilities.They are `X.Y.Z` correspondind to `Major.Minor.Patch` - -- **Major Version (X):**Introduces major changes to the code and breaking changes toward backward compatibility -- **Minor Version (Y):** These code changes don’t introduce breaking changes. This could be adding a new feature that doesn't break changes but are not exactly bug fixes. -- **Patches (Z):** Mainly correspond to bug fixes - -### Examples in common packages - -#### React(v18.2.0) - -![react](/images/uploads/react.png "React versioning") - -- **Major -> 18** -- **Minor -> 2** -- **Patch -> 0** - ---- - -#### Pipx(v1.1.0) - -![](/images/uploads/pipx.png) - -- **Major -> 1** -- **Minor -> 1** -- **Patch -> 0** - ---- - -## Start at v0.1.0 or v1.0.0? - -Convention recommends that in the initial development phase the starting version should be 0.1.0 which makes sense since it’s not in production yet. - -The version should only be bumped to 1.0.0 only if it is being used in production and stable. - -If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0. - -# Conventional Commits - -Conventional Commits is a convention on top of commit messages that are used to automate version changes. It provides an easy set of rules for creating commit messages and works well with SemVer by describing features, fixes and breaking changes that correspond to SemVer standards. - -## Summary - -The commit message should be structured as follows: - -``` -[optional scope]: - -[optional body] - -[optional footer(s)] -``` - -The commit contains the following structural elements, to communicate intent to the consumers of your library: - -1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning). -2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning). -3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type. -4. types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others. -5. footers other than BREAKING CHANGE: may be provided and follow a convention similar to git trailer format. - -## E - -# Resources - -https://semver.org/ -https://www.conventionalcommits.org/en/v1.0.0/