I started a blog.....in 2024 (why you should too)

The book "Building a Second Brain" by Tiago Forte profoundly impacted the author, compelling him to start a blog in 2024. The core philosophy is that the mind should be for generating ideas, not just storing them, and that information consumption needs to shift towards timeless and private knowledge. This framework encourages capturing, organizing, and distilling information into a 'second brain' for easy access. The ultimate goal is to express learned ideas and what is found valuable, as understanding comes from creation and sharing. This process enables serving others through a unique perspective, potentially reaching individuals who might only connect through that specific content.

For over a year, the author has been building and utilizing a second brain, capturing and organizing ideas. However, the 'expressing' aspect of the framework was lacking. While YouTube videos cover technical topics, they don't encompass everything, including personal life experiences as a husband and father of six, hobbies like learning Japanese with a goal to live in Japan, reading, and movies. Despite not being an expert, the author believes loved ones—children, grandchildren, friends, and family—would appreciate hearing these perspectives. Therefore, the blog is primarily for personal expression, formulating ideas, and sharing them to provide value.

To make blogging as frictionless as possible, an 'insane blogging pipeline' is designed. The goal is to create and manage the blog entirely within the preferred notes application, Obsidian. The raw Markdown text from Obsidian will then be transformed into a beautiful website using Hugo, a powerful static site generator. Finally, the generated website code will be pushed to GitHub, our code repository. From GitHub, a webhook will notify Hostinger, the video's sponsor and the author's favorite website hosting provider, to pull the latest version of the website and host it.

While this process might seem overly complicated, it's motivated by a desire to stay within the existing workflow without leaving the notes application. Hostinger offers an incredible deal at hosting.com/networkchuck10, with their business plan being the author's personal choice. For those seeking a simpler approach, Hostinger's website builder, enhanced with AI, can quickly generate a starting point for a website, demonstrating that starting doesn't have to be complex. AI can be a valuable tool to overcome the 'blank page' syndrome and accelerate the initial creation process.

The first step in the battle plan is leveraging Obsidian. If not already installed, users are encouraged to download it, as it's described as the most amazing notes application. Within Obsidian, a new folder named 'Post' will be created to house all blog posts. This ensures that all other content within the user's Obsidian vault, including personal diaries and private notes, remains completely private and separate from the blog content.

To demonstrate, a new note titled 'My Insane Blog Pipeline' is created within the 'Post' folder. Obsidian's strength lies in its use of plain text files stored locally. To facilitate later steps, it's useful to know the exact location of this 'Post' folder on the system. This can be found by right-clicking the 'Post' folder in Obsidian and selecting 'Show in system explorer,' revealing the necessary file path.

Hugo, a tool the author recently started using, is introduced as a means to transform Markdown files from Obsidian into beautiful website code. Before installation, prerequisites include Git and Go. Git is essential for GitHub integration, while Go (or Golang) is a programming language from Google. Both are multi-platform and relatively simple to install. Users should visit their respective official websites to download and follow the installation instructions. Verifying installation by typing 'git version' and 'go version' in the terminal is recommended.

After installing Hugo, the next step is to set up the website structure. Navigate to a desired directory in the command line (e.g., Documents) and use the command 'hugo new site [your site name]' to create a new site folder. Inside this folder, Hugo automatically generates necessary subdirectories like 'content,' 'layouts,' and 'static'. This command initializes the basic framework for the Hugo website.

To make the Hugo site visually appealing, themes are applied. The process starts with initializing a Git repository in the new site's root directory using 'git init'. This command prepares the project for version control. Configuration involves setting the global Git username and email for commits. Users can find numerous free themes on themes.gohugo.io. The 'Terminal' theme is chosen for its aesthetic and relevance.

After initializing a Git repository with 'git init' and configuring Git user details, the next step is to select and install a theme. Websites like themes.gohugo.io offer a wide variety of free themes. The 'Terminal' theme is chosen for its aesthetic. Installation instructions vary by theme, but a common method is using Git submodules. The command 'git submodule add [theme repository URL]' downloads the theme into the 'themes' directory.

Once the theme is downloaded, the Hugo configuration file, 'config.toml' (or 'hugo.toml'), needs to be updated to reflect the chosen theme. Users should copy the base configuration provided by the theme, typically found in its documentation, and paste it into their site's 'config.toml'. It's crucial to ensure the configuration matches the theme's requirements, especially concerning the 'module' section. After saving the configuration, the site can be previewed locally.

To test the website with the installed theme, the command 'hugo server -t [theme name]' is used. This command starts a local web server, usually at 'localhost:1313'. Visiting this address in a web browser displays the basic Hugo site with the chosen theme applied. While initially minimal, this preview confirms the theme installation and site setup are functional, ready for content addition.

The current setup involves Obsidian for writing notes (stored in a 'Post' folder) and Hugo for building the website (with its content expected in 'content/post'). To sync these, a 'post' directory needs to be created within Hugo's 'content' folder if it doesn't exist. The goal is to ensure that new blog posts created in Obsidian's 'Post' folder are automatically mirrored to Hugo's 'content/post' folder.

This synchronization can be achieved using file copying commands. For Windows, 'robocopy' with the '/MIR' (mirror) option is suitable for replicating the source 'Post' folder from Obsidian to the destination 'content/post' folder in Hugo. For macOS and Linux, 'rsync' is the equivalent command. These commands ensure that the Hugo content directory accurately reflects the posts written in Obsidian. After syncing, the site can be previewed locally using 'hugo server -t terminal'.

The `public` folder, generated by Hugo, contains the static HTML files that form the final website. This `public` folder is what will eventually be deployed. The syncing process ensures that any new Markdown files in Obsidian's 'Post' directory are copied into Hugo's `content/post` directory, allowing Hugo to rebuild the site with the latest content. This lays the groundwork for deploying the complete website.

To add essential metadata like titles and publication dates to blog posts, frontmatter is used within Obsidian notes. This metadata is placed at the beginning of the Markdown file, enclosed by triple dashes (`---`). It allows Hugo to correctly interpret and display post information. Users need to switch to 'source mode' in Obsidian to edit this frontmatter section.

An example frontmatter block includes fields for 'title,' 'date,' and 'tags.' For instance, setting the title to 'My Insane Blog Pipeline' and the date to 'Friday the 15th' (or the current date) provides necessary context. After adding this metadata and switching back to 'reading mode,' the post appears with a proper title and date. The 'templater' plugin in Obsidian can be used to create templates for frontmatter, further streamlining the process.

A common challenge is incorporating images into blog posts. When images are pasted or embedded in Obsidian, they are typically stored in an 'attachments' directory managed by Obsidian, separate from the 'Post' folder. This separation means a simple file sync won't transfer these images to the Hugo site. The solution involves a custom Python script designed to locate image links within blog posts and correctly copy them from Obsidian's attachment directory to a designated images directory within Hugo's static assets.

To facilitate image handling, a 'static' folder must exist in the Hugo project root, and within it, an 'images' directory should be created (`mkdir images`). The Python script will then copy image files from the Obsidian 'attachments' folder to this 'static/images' folder and ensure the Markdown links in the blog posts correctly point to these new locations. Users need to configure specific variables at the beginning of the Python script to match their directory paths, ensuring compatibility between Obsidian and Hugo.

The Python script performs two main functions: it processes the blog posts to identify image references and then copies the actual image files from Obsidian's attachment directory to Hugo's `static/images` directory. Separate scripts are provided for Windows (using raw string paths) and macOS/Linux. After running the script, testing the site with `hugo server -t terminal` will display the blog post with its images correctly rendered, confirming the script's success.

The next critical step is pushing the website's code to GitHub. A GitHub account is necessary, and a new repository (e.g., 'Chuck Blog') should be created. For authentication, SSH keys are required instead of passwords. Users can check for existing SSH keys in their home directory (`~/.ssh/`) or generate new ones using `ssh-keygen`. The public SSH key (`.pub` file) needs to be added to the GitHub account settings under 'SSH and GPG keys'.

After setting up SSH authentication, the local Hugo project needs to be linked to the remote GitHub repository. This is done using `git remote add origin [repository URL]`. Then, the Hugo site is built using the `hugo` command, generating the static files in the `public` folder. These files are staged for commit with `git add .`, committed with a message using `git commit -m 'Your commit message'`, and finally pushed to the GitHub repository with `git push origin master`.

Hostinger specifically needs access to the compiled website files, which reside in the `public` folder. To provide this, the contents of the `public` folder are published to a separate GitHub branch, often named 'hostinger', using `git subtree push --prefix public origin hostinger`. This creates a dedicated branch containing only the static website files, making it easy for Hostinger to deploy.

With the website code on GitHub, the next phase is setting it up on Hostinger. A new website can be added, choosing an 'Empty website' or the 'Website builder' for a simpler approach. For the domain, a subdomain like 'blog.networkchuck.com' can be used. If the domain is registered elsewhere (e.g., Cloudflare), the user must update the DNS records (specifically, an A record) to point to Hostinger's IP address, which can be found in the hosting plan details.

Within Hostinger's control panel, navigate to 'Advanced' settings and select 'Git'. Here, an SSH key is generated to authorize Hostinger to access the GitHub repository. The repository details (URL and branch) are then entered. Crucially, for Hostinger to deploy the site, the 'branch' selected must be the one containing the compiled website files, which is the 'hostinger' branch created earlier via `git subtree push`.

After Hostinger pulls the code from the specified GitHub branch, the website becomes live. It may take a few minutes for the SSL certificate to be generated and the site to become accessible. Users might need to temporarily disable Cloudflare's proxy ('DNS only') during the initial setup to allow Hostinger to install the SSL certificate correctly. Once configured, the blog will be accessible at the chosen domain.

The manual workflow involves several distinct steps every time new content is created. First, files must be synced from Obsidian to Hugo using `robocopy` or `rsync`. Next, a Python script must be run to handle image transfers. Subsequently, Git commands (`git add`, `git commit`, `git push origin master`) are needed to update the main GitHub repository. Then, the `public` folder must be rebuilt and pushed to the 'hostinger' branch using `git subtree push`. Finally, Hostinger might need manual deployment triggered or rely on a webhook. This multi-step process is time-consuming and prone to errors.

To automate this, a webhook is set up in GitHub to notify Hostinger whenever new code is pushed. This triggers an automatic deployment on Hostinger's side, eliminating the need for manual intervention there. However, the steps preceding the GitHub push (syncing, image transfer, Git commands, Hugo build) remain manual, highlighting the need for a consolidated script to handle the entire process from start to finish.

I forgot to do the Hugo Command. So dumb. Hugo will take our blog content and rebuild it. You see, this is why I have that giant script.

A comprehensive script, available in PowerShell for Windows and Bash for macOS/Linux, automates the entire blogging workflow. This script consolidates all previous manual steps: syncing files from Obsidian, running the Python script for image transfers, executing Git commands (`add`, `commit`, `push`), and finally running the `hugo` command to build the website. Users are instructed to set essential variables at the beginning of the script, such as source and destination paths, and their GitHub repository name, to ensure proper functionality.

The script is designed to be placed within the Hugo project directory. Once the variables are correctly configured, running a single command executes the entire pipeline. This includes copying new content and images, committing changes to Git, building the Hugo site, and pushing updates. The result is a fully automated process where creating a new post in Obsidian and running the script instantly updates the live website.

The author emphasizes the beauty and efficiency of this consolidated script, transforming a complex, multi-step process into a single execution. This workflow allows content to be created privately in Obsidian and then seamlessly published online. The author also mentions the possibility of turning this script into a keyboard hotkey for even faster access. The core message reinforces starting to write and express ideas, regardless of the chosen tools or complexity, as it benefits personal growth and potentially helps others.