How to build a website using github page + Jekyll + customized domain


Do you want to build a website for your own business? such as coaching, therapy, personal blog, etc?

You are in the right place.

I have been building several websites using different stacks. Following is what I learned.


There are several ways to build a website.

1. Starting from scratch.

Pros: Fully customizable.

Cons: Development is slow; steep learning curve; many rooms to make mistakes; expensive ($10 per month for server).

    This is the scratch-scratch way. Writing frontend, backend. Deploy database. Deploy server. Config DNS, etc.

    For frontend code, you won’t want to write the plain HTML/CSS/JS. Using some existing framework will boost your productivity.

    Popular frontend frameworks are Angular, ReactJS, etc.

    For backend code, some frameworks are NodeJS, Rub-on-rails, Django, etc.

    For database, MySQL, MongoDB, etc.

    For DNS domain, Godaddy or Square Space sells domain names.

    For server, any cloud service would work: AWS, Google Cloud, DigitalOcean, etc.

    You have the full control in this option. But you need to learn a lot of tech stacks to make it work.

    The bosong.link uses this approach, assemble AngularJS + Node.js + Express to make it work. Design doc

    2. Using off-the-shelf templates

    Pros: faster development than option 1. Many website templates to choose. (almost) No need to write code.

    Cons: Less flexible than other options, but still many layouts to choose from.

    The dev cycle is much faster than option 1. Some Content Management Systems like WordPress will pull the heavy lift for you.

    You still need to buy domain, and buy server to host your website. Typically, domain is $12 per year, and server is $5-$10 dollar per month. Yes, server is much more expensive than domain!

    The website you are browsing right now, www.bo-song.com , is using WordPress as its CMS.

    3. Using Github page

    Pros: Free hosting and free assigned domain.

    Cons: static website only.

    Github integrates with the static website generator Jekyll. You write markdown, HTML or CSS/JS, Jekyll will compile the static website for you. After pushing your repo to github, Github builds your website and deploys it to your <username>.github.io address.

    3minutesband.github.io and www.onenesstgroup.com uses this approach.

    Minimal Mistakes is the theme used by these two websites. It contains CSS/JS styles that we can use.

    Jekyll tutorial: https://jekyllrb.com/

    Minimal Mistakes:

    • cheatsheet: https://www.fabriziomusacchio.com/blog/2021-08-11-Minimal_Mistakes_Cheat_Sheet/#notice-boxes
    • tutorial: https://mmistakes.github.io/minimal-mistakes/
    • source code: https://github.com/mmistakes/minimal-mistakes/tree/1b06aff3bc36890e073b573054895d861f177c95

    The remote theme is preferred for Github page hosting.

    To collect customer’s emails, using Mailchimp.

    • Do get user’s permission before adding them to your mailing list. Otherwise, they may mark your email as spam. The ISP may aggressively block your email, or even block your email address.
    • Always providing a email ubsubscription button in your email.

    Jekyll also integrates a list of techniques, such as Markdown, Liquid, Fontmatters, to make the content creation smoother.

    Some key features

    
    
    ---
    name: "Bo"
    ---
    {{ page.name }} # "Bo"
    
    {% include gallery %} # "include the html file under the folder _includes"

    Leave a comment

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.