Many programmers hope to have their own static site to store their occasional thoughts. However, GitHub Pages loads slowly and is not friendly to China access, often resulting in connection failed / 404 status.
Today, I’ll teach you how to use Vercel + Cloudflare to achieve CDN acceleration and China proxy - completely free!
Understanding Blogs, SSG, and Static Sites#
Start Let’s start with the definition of a blog. What is a blog?
A blog is a
personal website in diary formatthat uses posts, pictures, or videos to record life, express emotions, or share information. Articles on blogs are typically arranged in reverse chronological order based on posting time.
To create a blog, there are many open-source static site generators (SSG) to choose from:
static site generatorsHexo: A veteran static site generator with mature ecosystem and rich theme selection, suitable for quick start.
Hugo: Written in Go language, extremely fast, supports multiple languages, simple deployment.
Astro: A rising star in recent years, supports partial rendering, MDX, integrates React/Vue/Svelte and other frameworks, very suitable for writing blogs or documentation.
Next.js: Strictly speaking not an SSG, but it provides next export static export capability, natively fits with Vercel, and can do more complex dynamic functionality.
These tools allow you to write articles in Markdown and then generate the entire site’s static files with one click.
So, What Does Static Site Mean?#
Web development, this technology itself relies on browsers, such as the well-known Chrome browser, which is essentially a huge execution engine. What does it execute? JavaScript code, so the JavaScript interpreter is actually built into the V8 engine.
Chrome
JavaScriptHaving just JavaScript is not enough. We also need a visual GUI interface for users to see and access data, and we need beautiful styles. This introduces HTML and CSS.
HTML
CSSAlright, you’ve mastered all the skills of front-end development (just kidding), but honestly, the essence of front-end development is just that - building a user-friendly, stable, and fast-access interactive interface. All you need is the THREE things above.
Speaking of static, it’s actually quite clear. We know modern web development is C-S architecture, client-server, and static means the HTML, CSS, and JS are already fixed and won’t change. The server-side generates static frontend build folder dist and sends it to the client (browser) - this is the meaning of a static website. It’s generated at build time, doesn’t need network I/O requests, and although real-time is weak, because all data is local, access is very fast.
That said, modern personal blogs are not completely static. For example, most blog websites have comment sections integrated, like giscus which is a GitHub self-hosted small tool, definitely needing I/O access. But generally, as long as the main website content blog is static, then it’s a static website.
giscusVercel#
Vercel is a US-based company, formerly known as Zeit.
VercelIt provides a cloud platform that allows developers to deploy front-end projects with one click, especially static sites and Serverless applications.
Serverless is a very popular technology abroad, belonging to cloud services, but I won’t expand on this here.
Vercel also deeply integrates with GitHub/GitLab, providing high-quality CI/CD services. Every time you git push, it automatically rebuilds and deploys the project.
Building a Blog Deployed on Vercel Using Static Site Generator#
I introduced SSG before. I have used Hexo, Hugo before, but now switched to Astro.
Follow the official tutorial to create a site and deploy it on GitHub, then you need to add new project in Vercel to open this project. Import Github repository to import your GitHub project and enter the configuration interface. Configure framework presets here - if you’re using Astro, use its preset.
Generally, you don’t need to change anything else because the SSG presets are sufficient. If you need customization, you can also configure build and output settings, environment variables. Example as follows:
// Build Commandastro buildnpm run build// Output Directorydistoutputs// Install Commandpnpm installyarn installAfter deployment, Vercel will give you a domain like [project-name].vercel.app, through which you can access your project (provided you have VPN enabled), which generally cannot be accessed in mainland China.
At this time, you need something else: Cloudflare.
Cloudflare Accelerates Access Through CDN#
Cloudflare is an American company that provides global CDN (Content Delivery Network), DNS resolution, website security, and edge computing services.
Its goal is: make websites faster, more secure, more reliable
Cloudflare has 300+ data centers globally, why can it accelerate through CDN?
- When users visit a website, requests automatically go to the nearest Cloudflare node, which then caches content or makes origin requests.
- Benefits: reduces latency, improves domestic/overseas access speed.
Additionally, this company also provides DNS resolution services
- Cloudflare provides free and very fast DNS (the famous 1.1.1.1 public DNS).
- You can host your domain on Cloudflare and configure resolution records in its backend.
Before this, you need to go to a domestic domain platform to purchase a domain name, such as Alibaba Cloud Domains, because without a domestic domain, it cannot be resolved to domestic locations, preferably also filed and added with SSL certificate.
First, we log in to the Cloudflare website, register an account, then enter your custom domain name, wait for Cloudflare verification, enter the DNS resolution control panel, and redirect your domain to [project-name].vercel.app, which is the domain provided by your Vercel.
Here I resolved blog.baoyuxiag.fun to cname.vercel-dns.com, type is CNAME. Why is the resolved domain not the domain carrying the project name? Because Vercel itself supports automatically assigning the correct domain based on your project. You just need to click domains on the Vercel homepage, add the domestic root domain you purchased. Although a warning popup will appear because it detected the proxy server Cloudflare, it doesn’t matter. At this time, Cloudflare knows which domain’s data to cache.
After doing this, your website is reverse proxied by Cloudflare. All requests will first hit the Cloudflare proxy server. Because the proxy server is in China or nearby nodes like Japan, South Korea, Hong Kong, it can perform CDN acceleration access in the China region, and then these servers cache data from foreign servers. In actual testing, your Vercel app can basically be accessed smoothly this way.
If you like my blog, feel free to follow @YuxBao!