Skip to content

Commit 9abe501

Browse files
FireIsGoodFireIsGood
committed
feat: static sites article
1 parent e9d5ccb commit 9abe501

File tree

4 files changed

+187
-0
lines changed

4 files changed

+187
-0
lines changed

‎src/content/blog/static-sites-really-fast.md‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
title: "Static Sites Really Fast"
3+
description: "Making a static site really fast"
4+
pubDate: "2024-12-18"
5+
cover: "@/images/static-sites.png"
6+
---
7+
8+
A static website is a website whose contents are basic HTML, CSS, and JS—hand-written or generated from more code.
9+
These files can then be served over many services directly without having to run a special type of server—they
10+
just need to be able to serve files. This makes them the easiest way to host websites as long as they the content on the
11+
site doesn't change constantly.
12+
13+
For learning web development, I believe making a site in this way is one of the fastest ways to get something you've
14+
made out there.
15+
16+
To create a static website, you first need to make your website's files and then host them somewhere online.
17+
18+
## Making the Website
19+
20+
To start out, you don't really need a framework or otherwise—Just some basic HTML. We start out in our project's
21+
directory with a file called `index.html` so it will be loaded to the base path of the URL.
22+
23+
```html title="index.html"
24+
(empty file right now)
25+
```
26+
27+
If you're using a modern code editor with completions from [Emmet](https://emmet.io) you can get the basic outline with
28+
a code snippet expanded from `html:5`. You should also have a formatter on hand for this process to keep things tidy. I
29+
use [Prettier](https://prettier.io) as it's widely used and doesn't need configuration to work well.
30+
31+
Below is the snippet provided by Emmet and cleaned up by Prettier:
32+
33+
```html title="index.html"
34+
<!doctype html>
35+
<html lang="en">
36+
<head>
37+
<meta charset="UTF-8" />
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
39+
<title>Document</title>
40+
</head>
41+
<body></body>
42+
</html>
43+
```
44+
45+
With this template, you can add some semantic HTML and some placeholder content. I usually add in Pico CSS just to get
46+
things looking good to start, so I've added the classless basic version in the `<head>`.
47+
48+
<!-- use default prettier format as an example -->
49+
<!-- prettier-ignore -->
50+
```html title="index.html"
51+
<!doctype html>
52+
<html lang="en">
53+
<head>
54+
<meta charset="UTF-8" />
55+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56+
<title>I'm the best</title>
57+
<link
58+
rel="stylesheet"
59+
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
60+
/>
61+
</head>
62+
<body>
63+
<main>
64+
<article>
65+
<h1>I'm the best</h1>
66+
<p>It's simply well known</p>
67+
</article>
68+
</main>
69+
<footer>
70+
<p>Made by me, the best</p>
71+
</footer>
72+
</body>
73+
</html>
74+
```
75+
76+
Now you're ready to host it online!
77+
78+
## Hosting it Online
79+
80+
Hosting a static website can be done through many sources for free or through paid services to get servers for you.
81+
Unfortunately for our objective, these aren't very fast to set up and you're unlikely to have an account on some web
82+
hosting service if you're making a website for the first time.
83+
84+
As we want to get this hosted fast, we can use something very fast or very widespread in the forms of Surge or GitHub
85+
Pages. They both have a few trade-offs as listed here for brevity:
86+
87+
- [Surge](https://surge.sh)
88+
- Just need an email
89+
- All from the command line
90+
- Must manually republish
91+
- Default URL is `[custom-name-here].surge.sh`
92+
- [GitHub Pages](https://pages.github.com)
93+
- Requires a GitHub account (you probably have one)
94+
- Additional step to configure the repository on GitHub
95+
- Additional step to deal with Jekyll
96+
- Automatically republishes on Git push
97+
- Default URL is `[your-github-username].github.io`; the base domain or a subdomain of it.
98+
99+
For the main section of this guide, we will use Surge to just get the site up fast. Afterwards, we will go back and host
100+
over GitHub Pages for open source sites you want to redeploy as you commit updates.
101+
102+
### Hosting over Surge
103+
104+
To host over surge, you need to use the Surge CLI. Using [NPM](https://www.npmjs.com) you can either install it globally
105+
or run it via `npx`.
106+
107+
```bash
108+
# Install globally
109+
npm install --global surge
110+
# Run
111+
surge
112+
113+
# Run directly
114+
npx surge
115+
```
116+
117+
With either of these methods, run the Surge CLI in your project's directory, then follow the prompts. You did it!
118+
Whenever you want to update your website, just run your Surge command and use the same URL.
119+
120+
You can see an example website at [unadvised-chance.surge.sh](https://unadvised-chance.surge.sh) and its extremely
121+
minimal code at my [GitHub repository](https://github.com/FireIsGood/surge-static-article).
122+
123+
For a more detailed guide, you can check out the [Surge Docs](https://surge.sh/help/getting-started-with-surge) on this
124+
topic.
125+
126+
### Hosting over GitHub Pages
127+
128+
To host over GitHub Pages, you need a GitHub account and Git. To use GitHub pages without the 'Pro' subscription, your
129+
repository will need to be public. Additionally, the default for using a repository that isn't named in the format of
130+
`[your-github-username].github.io` will be deployed as a subdomain under that URL.
131+
132+
To start, initialize a Git repository in your project folder and commit everything.
133+
134+
```bash
135+
git init
136+
git add -a
137+
git commit -m "Initial Commit"
138+
```
139+
140+
Next, [create a new repository on GitHub](https://github.com/new). I would recommend to not add anything as it will show
141+
you how to push your files if you don't have files in the repository.
142+
143+
If you added any options, you will have to manually type:
144+
145+
```bash
146+
git remote add origin https://github.com/[your-username]/[repository-name].git
147+
git branch -M main
148+
git push -u origin main
149+
```
150+
151+
Now, navigate to the GitHub repository online and go to the **Settings** tab and then **Code and automation -> Pages**.
152+
Change the "Source" option to GitHub Actions and click "Configure" on the **Static HTML** option. Click **Commit
153+
Changes**, rename the commit if you want, and click **Confirm**.
154+
155+
![Setting up the GitHub Pages workflow](../../images/gh-pages-actions.png)
156+
157+
Your site should now be up within a few seconds. You can set its link to be easily seen by going to the top right gear
158+
icon and then checking the **Use your GitHub Pages website** option. While you're there, you can also uncheck the
159+
**Releases** and **Packages** options to clean up the side bar. Save your changes and your link should be shown under
160+
the **About** header.
161+
162+
![Changing repository settings](../../images/gh-pages-repo-settings.png)
163+
164+
Whenever you want to update your website, just push local Git changes to your main branch.
165+
166+
You can see my example at
167+
[fireisgood.github.io/surge-static-article](https://fireisgood.github.io/surge-static-article/) and its moderately
168+
minimal code at my [GitHub repository](https://github.com/FireIsGood/surge-static-article).
169+
170+
For a more detailed guide, you can check out the [GitHub Pages Docs](https://docs.github.com/en/pages/quickstart) on
171+
this topic.
172+
173+
## Conclusion
174+
175+
It's really that simple.
176+
177+
If you want to continue refining your site by adding a custom domain or a better site in general, find some other
178+
article, I'm not going to explain it here.
179+
180+
### Further Research
181+
182+
There are other hosts such as Netlify, Vercel, or Digital Ocean with nice free tiers for static hosting. For more
183+
information on those, you can check out [Free For Dev page on Web Hosting](https://free-for.dev/#/?id=web-hosting).
184+
185+
You could also run your static site on a Virtual Private Server service or host it yourself if you wanted more control
186+
on the backend. Services like [Hostinger](https://www.hostinger.com/vps-hosting),
187+
[Digital Ocean](https://www.digitalocean.com/pricing), and many others can be found for this purpose.

‎src/images/gh-pages-actions.png‎

101 KB
Loading

‎src/images/gh-pages-repo-settings.png‎

45.2 KB
Loading

‎src/images/static-sites.png‎

160 KB
Loading

0 commit comments

Comments
 (0)