The Making of EngieBenji.com

Creating my personal blog, EngieBenji.com, has been an exciting journey. Here’s a behind-the-scenes look at how I built the site using Jekyll and GitHub Pages.

Why Jekyll?

I chose Jekyll for its simplicity and efficiency. As a static site generator, it allows me to create fast, secure, and easily maintainable websites. It’s perfect for blogs and personal projects because it converts plain text into static websites and blogs. Plus, it integrates seamlessly with GitHub Pages.

Setting Up with GitHub Pages

GitHub Pages is a free service provided by GitHub that allows you to host your website directly from a GitHub repository. Here’s a brief overview of the steps I took:

1. Creating the Repository: I started by creating a new repository on GitHub named engiebenji.github.io. This naming convention is important as GitHub Pages uses it to serve the site.

2. Installing Jekyll: On my local machine, I installed Jekyll by following the official Jekyll installation guide. Once installed, I used the jekyll new command to create a new Jekyll site.

    gem install bundler jekyll
    jekyll new engiebenji
    cd engiebenji
   

3. Customizing the Site: I customized the default template by editing the _config.yml file and creating my own layouts, includes, and posts. I focused on creating a clean, professional design that reflects my personal brand and showcases my engineering projects and ideas.

4. Pushing to GitHub: After making my changes, I pushed the local Jekyll site to the GitHub repository.

    git init
    git add .
    git commit -m "Initial commit"
    git remote add origin https://github.com/engiebenji/engiebenji.github.io.git
    git push -u origin main
   

5. Enabling GitHub Pages: In the repository settings on GitHub, I enabled GitHub Pages and selected the main branch as the source. GitHub automatically built and deployed the site.

Benefits of GitHub Pages over Website Generators

While services like Squarespace and Wix offer user-friendly interfaces and customization options, GitHub Pages paired with Jekyll provides several distinct advantages:

1. Cost: GitHub Pages is completely free, making it an excellent choice for personal projects and blogs without any hosting fees.

2. Version Control: With GitHub’s version control system, every change made to the site is tracked. This makes it easy to roll back changes, collaborate with others, and maintain a history of your site’s development.

3. Performance: GitHub Pages delivers static sites, which are faster to load compared to dynamically generated pages from platforms like Squarespace and Wix. This improves user experience and SEO.

4. Flexibility: Jekyll allows for extensive customization and does not limit you to predefined templates and structures. You have full control over your site’s design and functionality.

5. Learning Opportunity: Building a site with Jekyll and GitHub Pages is a great way to improve your web development skills, offering a hands-on experience with HTML, CSS, and Markdown.

Theming with Jekyll

One of the great aspects of Jekyll is the ability to use themes, which provide a base design that you can customize to fit your needs. Here’s how you can use and customize a Jekyll theme:

1. Choosing a Theme: Browse the Jekyll Themes site to find a theme that fits your style. Popular themes are also available on GitHub.

2. Installing the Theme: Once you’ve chosen a theme, follow the installation instructions provided by the theme’s documentation. Typically, you can install a theme by adding it to your Gemfile and updating the _config.yml file.

    # Gemfile
    gem "jekyll-theme-name"
   

    # _config.yml
    theme: jekyll-theme-name
   

3. Customizing the Theme: After installing the theme, you can customize it by overriding the default files. Create corresponding files in your project’s directory to override the theme’s layouts, includes, and styles.

   For example, to customize the theme’s main layout, copy the layout file from the theme’s repository to your _layouts directory and edit it to suit your taste.

    cp $(bundle show jekyll-theme-name)/_layouts/default.html _layouts/
   

4. Editing Styles: Modify the CSS or SCSS files to change the look and feel of your site. Place your custom styles in the assets directory and link them in your layouts.

5. Content Updates: Continue to add your content in the _posts directory, and push the changes to GitHub. Jekyll will regenerate your site with the customized theme.

Getting a Custom Domain

Using a custom domain for your GitHub Pages site adds a professional touch. Here’s how you can set it up:

1. Purchase a Domain: Purchase a domain name from a domain registrar such as Namecheap, GoDaddy, or any other registrar of your choice.

2. Configure DNS Settings: In your domain registrar’s settings, configure the DNS records to point to GitHub Pages. You will need to create A records pointing to GitHub’s IP addresses and a CNAME record pointing to your GitHub Pages URL.

    A 192.30.252.153
    A 192.30.252.154
    CNAME yourusername.github.io
   

3. Add CNAME File: In your GitHub Pages repository, create a file named CNAME in the root directory and add your custom domain name to this file.

    www.yourcustomdomain.com
   

4. Verify the Setup: It may take some time for the DNS changes to propagate. Once they do, your site should be accessible via your custom domain.

Maintaining the Blog

Maintaining the blog is straightforward. I write my posts in Markdown, place them in the _posts directory, and push the changes to GitHub. Jekyll and GitHub Pages handle the rest, regenerating the site and publishing the new content seamlessly.

Conclusion

Using Jekyll and GitHub Pages has made creating and maintaining EngieBenji.com an enjoyable experience. It’s a powerful combination that provides a lot of flexibility without the overhead of managing a server or dealing with complex configurations. Adding a custom domain and theming capabilities further enhances the professional look of the site.

I hope you enjoyed this peek into the making of my website!