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
- Easy to maintain project structure
- Automate deployment
- Easy to maintain content with
mdx
- High Performance
- Able to show who I am and what I've worked on
- Eye-catching, I hope I can do thatš¤£
Tech stack
(Like writing some twitter postš¤£)
- Language:
Typescript
- Frontend Framework:
React
,Remix.run
- Styling:
TailwindCSS
(oh yes, I am not usingshadcn/ui
. Great library, but no need to add complexity to this project) - Hosting Platform:
Cloudflare Pages
- Data Storage:
Cloudflare KV
Getting started!
Step 1: Start with Remix
's create cli
pnpx create-remix@latest
- 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.
- Add your domain to
Cloudflare
first a. Go toWebsite
->Add a site
- In the
Workers and Pages
, go toOverview
, select the project - In the Page project home page, go to
Custom domain
- 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.