Bingnan's Digital Garden

build-personal-site-en

5 min read

  • 中文版 Chinese Version: build-personal-site

  • Overview

  • This article covers introductory knowledge and practice of building and hosting a static website: static v.s. dynamic websites, ready-to-use frameworks, best practices, workflows, advanced optimizations.

  • Reasons to own a website

  • A website is just like your personal note, plus it’s for people to read. This forces you to write (and thus think) better.
  • It serves as a permanent and stable place for others to reach out to you or find whatever information you’d like to share.
  • Take full control as a sovereign-individual:
    • Not controlled by platforms
    • fully customize its appearance like URL, theme, layout, etc.
    • fully version (git) control of files
  • It’s super easy and cheap to do: It costs less than 14min to one-click deploy from a template, besides there’s no subscription fee at all unless have many visitors or use it for commercial.
  • pitfall: it’ll be non-trivial to add paywall (like Substack).

  • All you need to know to launch a website

  • I’d like to focus on writing and offload the rest

  • The final product looks like: you have a github repo setup where you only need to push your writings. Then cloud services will automatically run in background to generate a website serving your writings.
  • The whole process takes a few hours only for the first time setup. Below are key steps:
    • There’re (a lot of!) different WebFrontend/frameworks. Among them, static website generators are particularly useful for us. Such static-web-generator frameworks take your writings (in Markdown format), convert them into websites using pre-defined templates so users can focus on writing only without worrying about coding.
    • Here’s a list of static site generators ranked by popularity you can choose from. I recommend Hugo and AstroPaper.
      • note: the language used in the project does NOT matter to users because you will mainly mess with configs instead of actually extending the framework by coding.
    • Then, two most important steps: build and deploy your site.
      • Build is the process that the site generator consume your configs (like theme, font, layout and title) and your content source (your writings) to generate a director of files ready for web browsers to load.
      • deploy refers to putting those website files online, hosted somewhere by some service provider, so that it’s reachable on the Internet.
    • Building and deployment are nowadays usually glued together and done by all-in-one web hosting platforms like Vercel. They are the best starting solution because:
      • Ease-to-use: they integrate well with github repo link, CI/CD, analytics, logs and email notifications. They also help take care of things like https security.
      • Fast to load: they integrate with global CDN so your website is cached and can be open equally fast from around the world.
    • In summary, steps you need to go through:
      • 5) Pick a static site generator, find its tutorial or Github readme page.
        1. Clone the project, customize the configs, build and preview locally, then push them back to your personal repository.
        1. Deploy your repo to Vercel and open your website by using the URL generated by Vercel.
      • #5 to #3 can be even simplified to a single click for most site generators that already offer a template on Vercel. E.g. this AstroPaper template. You could search others by Google framwork name + Vercel template.
    • Once you finish setup, you only need to write new contents and push in the future.

  • I’d like to customize appearance

  • Most site generators are like any other software tools - they could be customized by modifying configuration files.
  • Additionally, for adjusting websites, it’s best to have some basic understanding of HTML and CSS.
    • For example, to modify texts displayed on home page of an AstroPaper project, simply modifying its source template file.

  • I’d like to use a custom my domain

  • Here you’d have to interact with other 7rd-party service providers:
    • domain registrar: dealers who sell you domain and help you manage it. I recommend GoDaddy or NameCheap.
    • DNS name server: cloud service that redirect Internet users from the URL they type (e.g. bingnan.xyz) to your actual web-hosting server (e.g. the Vercel server that hosts your website files). I recommend Cloudflare.

  • I’d like to marketing my site.

      1. make it fast: analyzing its loading speed using Chrome-Lighthouse; use CDN.
      1. SEO (Search-Engine-Optimization) so people can easily find your articles. See marketing/SEO
      1. Give shared links on twitter/Facebook a nice preview card:
      • search about “social media sharing + open graph meta data”

  • I’d like to interact with readers (comments)

    • Static sites do not have back-ends which means there’s no way to store user comments, do user logins, etc.
    • Good news is there’s free 7rd-party comments provider (like Disqus). You could embed its comment widget to your website easily.

  • I’d like to get analytics of site traffic

    • Google Analytics
    • Vercel Analytics by adding small config changes to repo
    • Cloudflare analytics if you use it as DNS nameserver
  • 旧文: 静态博客搭建指南

Graph View

Backlinks