Story of this site

Why did I build this?

At the time I was writing this, I was on my way to Canada. Job hunting in Hong Kong is a bit difference from the job hunting in Canada. In Hong Kong, we don't really need a profolio to find a job. All we need to prepare are CV, cover letter and be able to speak logically. However, since I have no working experience in Canada, I think it's more intuitive for the people to get to know me by showing them my website.

Besides, there're few new things I would like try in this project, including Remix.run and Cloudflare Pages.

Requirement

  1. Easy to maintain project structure
  2. Automate deployment
  3. Easy to maintain content with mdx
  4. High Performance
  5. Able to show who I am and what I've worked on
  6. Eye-catching, I hope I can do thatšŸ¤£

Tech stack

(Like writing some twitter postšŸ¤£)

  1. Language: Typescript
  2. Frontend Framework: React, Remix.run
  3. Styling: TailwindCSS (oh yes, I am not using shadcn/ui. Great library, but no need to add complexity to this project)
  4. Hosting Platform: Cloudflare Pages
  5. Data Storage: Cloudflare KV

Getting started!

Step 1: Start with Remix's create cli

  1. pnpx create-remix@latest
  2. I am using just the basic template with Cloudflare Pages setup.

Step 2: Add TailwindCSS to the project

Following the guide here: https://tailwindcss.com/docs/guides/remix

Step 3: Add .prettierrc for code formatting

I love to use tab , as you can personalize how the indentation display in your code editor and not focusing other to follow your perference.

{
	"singleQuote": true,
	"trailingComma": "all",
	"useTabs": true,
	"tabWidth": 4
}

pnpm add -D prettier

Step 4: Add syntax highlight to blog content

I am using rehype-highlight. We can config that in remix.config.js.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
	devServerBroadcastDelay: 1000,
	ignoredRouteFiles: ['**/.*'],
	server: './server.ts',
	serverBuildPath: 'functions/[[path]].js',
	serverConditions: ['worker'],
	serverDependenciesToBundle: 'all',
	serverMainFields: ['browser', 'module', 'main'],
	serverMinify: true,
	serverModuleFormat: 'esm',
	serverPlatform: 'neutral',
	tailwind: true,
	// appDirectory: "app",
	// assetsBuildDirectory: "public/build",
	// publicPath: "/build/",
	future: {
		v2_dev: true,
		v2_errorBoundary: true,
		v2_headers: true,
		v2_meta: true,
		v2_normalizeFormMethod: true,
		v2_routeConvention: true,
	},
	mdx: async () => {
		const [rehypeHighlight] = await Promise.all([
			import('rehype-highlight').then((mod) => mod.default),
		]);
		return {
			rehypePlugins: [rehypeHighlight],
		};
	},
};

How the routes being structured.

Since Remix.run is going v2, I am using v2_routeConvention. You can have a look at the detail here

routes
-- _index.tsx
-- blog._index.tsx
-- blog.<each blog name>.tsx
-- blog.tsx
-- story._index.mdx
-- story.tsx

Deployment

Using Cloudflare Pages as the deployment platform is really easy to set up the deployment pipeline. Just like Vercel, all you need to do is to connect your github/gitlab repo to Pages and select the framework you are using, that's it!

Seting up your domain.

  1. Add your domain to Cloudflare first a. Go to Website -> Add a site
  2. In the Workers and Pages, go to Overview, select the project
  3. In the Page project home page, go to Custom domain
  4. Set up the domain here

A little trick

If you don't want the site go public before completed the site, you can set up Cloudflare ZeroTrust and block everyone else but yourself.

Summary

A cool project to work on. Planned to add a little more feature to it for learning Remix.run and Cloudflare as a developer platform. I see the potential of Cloudflare as a cost-effective developr platform and will be writing more about how can the platform help builders for better products. For those who are interested, the code is here. Check it out and leave me a star.

REF

  1. Github Repo of this site
  2. Remix.run
  3. Cloudflare Pages
  4. Cloudflare ZeroTrust
;