ddadaal.me

ddadaal.me (previously VicBlog) is the personal website of ddadaal.

Currently it is built with Gatsby.

Check it out now!

Features

Static website with modern web technologies
Built without templates
Auto-generated RSS Feed at /rss.xml
Synchronous & Native Search
- Native support for searching articles without any third-party services
Support multiple languages (Chinese & English) and dynamically changing languages
Articles written on markdown; Source code and contents separated
- Supports inline react components
Auto generated slide directory using GitHub API v3 on every build

Tools and Frameworks Used

Gatsby: the blazing-fast and flexible static site generator with a big community for React
TypeScript: the new go-to for any JavaScript projects
simstate: a self-made simple but enough strongly-typed hooks-based state management
react-typed-i18n: a self-made dynamic and strongly-typed i18n library utilizing TypeScript's Template Literal Types
styled-components: component-ize your styles as well
SCSS: bootstrap used SCSS so...trying to get rid of it in the future
gitalk: a comment system that works out of box
react-icons: extremely abundant but easy-to-use icon library for React
ESLint: Linter
editorconfig: unify code editor preferences
Baidu Analytics: Baidu Analytics
CNZZ: CNZZ Analytics
GitHub Pages: free and popular static website host
GitHub Actions: CI/CD built directly into the repo!

Development

We are using pnpm for package management.

Notice: If an environment variable is named ACTIONS_TOKEN, it will be used to authenticate GitHub requests to fetch slides (to get higher rate limit for CI). If it does not exist, an anonymous request is used, which is adequate for local development.

# For Windows users, install windows-build-tools
pnpm install --global windows-build-tools --python_mirror=https://npm.taobao.org/mirrors/python/

# install dependencies
pnpm install

# serve with hot reload at localhost:8000
nppm run dev

# run production build
pnpm run build

# **After build**, serve the production build locally
pnpm run serve

# Update dependencies with npm-check-updates and update the package.json
pnpm run upddep

Handling network errors when making request to GitHub API

A network request to GitHub will be started when running the application to retrieve my slides information from my repo, but such network might fail.

Error handling for such errors has been added, so that when the request to GitHub API fails, a warning is printed on the console, and a dummy Slide node is created, so that the whole application can still run.

License

MIT

ddadaal / ddadaal.me