build-personal-site-en

  • 中文版 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.
      • 6) Clone the project, customize the configs, build and preview locally, then push them back to your personal repository.
      • 7) 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.

    • 2) make it fast: analyzing its loading speed using Chrome-Lighthouse; use CDN.
    • 3) SEO (Search-Engine-Optimization) so people can easily find your articles. See marketing/SEO
    • 4) 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
  • 旧文: 静态博客搭建指南
    -

2 pages link here

build-personal-site

English (original) version of this article: build-personal-site-en

WebFrontend

writing-log build-personal-site-en

A digital garden, perpetually growing.