ryanfitton.co.uk

License and https://ryanfitton.co.uk/policies/

• Live:
• Dev:

---

Powered by Next.js with Tailwind CSS, hosted on Github pages.

Using template from gitHub.com/timlrx/tailwind-nextjs-starter-blog/:

• Running version 2.4.0 of gitHub.com/timlrx/tailwind-nextjs-starter-blog/;
• Running Next.JS version 15.3.3;
• Running TailwindCSS version 4.1.8;
• Running Yarn version 4.9.1;
• with the following custom changes:
  • A separate 'Portfolio' post section.
  • Additional social icons.
  • Updating the Tailwind template, including color schemes, fonts, margin/padding/font sizes, along with edits to the HTML templates and components.
  • Including the use of a Cloudflare image loader so Image Transformations API can be used.
  • Set up a GitHub Actions workflow to host the website and automatically upload any changes pushed to the 'main' branch.
  • Setting up new 'social media' icons, as the starter template didn't include all the social icons I required, such as KeyBase, Bluesky, Buy Me A Coffee, PayPal, and others.
  • Update the Sitemap and RSS feed generators to include posts from the new 'Portfolio' section.
  • Google AdSense ads and component (Ad.tsx).
  • Jest and Cypress testing scripts.

Getting started

Running local:

1. nvm install lts/iron. Requires at least Node.JS v20.18.1 and NPM v10.8.2. See nodejs.org/en/about/previous-releases.

2. Install required dependencies for package management: npm install --global yarn

3. yarn. Requires 4.9.1. This will install the required packages. See docs.

4. yarn dev. This starts the local server, which is accessible on http://localhost:3000.

Running a production build:

Ensuring the requirements are met from the 'Running local:' section above;

1. EXPORT=1 UNOPTIMIZED=1 yarn build. A static build will be produced in /out

2. If you have PHP installed on your system you can load the production build in a local web server: php -S localhost:8080 -t out/

Tests:

Combined Testing:

• yarn run test - Run tests for Jest and Cypress. Designed for local testing. Ensure yarn dev has been run first
• yarn run test:ci - Runs a local dev server and tests for Jest and Cypress for CI environments. - Probably the best to use in any case.

If you want to run either Jest or Cypress separately, see below.

Jest

This will perform unit tests. Tests are stored in /__tests__.

Commands:

• yarn run test:jest-watch - To run on only changed Test files
• yarn run test:jest-ci - If in a CI environment

Cypress

This will perform unit tests. Tests are stored in /cypress/e2e.

Commands:

• yarn run test:cypress-open - Opens Cypress for interactive testing. Ensure yarn dev has been run first
• yarn run test:cypress-run - Will run any Cypress tests. Good for use in a CI environment
• yarn run test:cypress-info - Outputs info about Cypress
• yarn run test:cypress-verify - Verify that Cypress is installed correctly and is executable

Other:

• yarn run lint. This will Lint the code.
• yarn run format. This will Prettify the code.
• yarn run analyze. This will analyse the bundle and open the results in a new browser window.

Github pages

1. Enable Github pages in your repository, follow these instructions here.

2. Enable a custom domain for your Github Pages site. More info.

3. If required, adjust the Github Pages work flow in this repository at: .github/workflows/static.yml

Post data

Use 1970-01-01-EXAMPLE.mdx as an example for post content, supporting HTML or Markdown.

Exaples found in:

• data/blog/1970-01-01-EXAMPLE.mdx
• data/portfolio/1970-01-01-EXAMPLE.mdx

Misc

Tests:

Codeblock styles:

Using Prism for code block styles. In MDX documents you can use these:

For single-line code block:

  `Your single-line line code block`

For multi-level code block:

Your multi-level line code block

To illustrate keyboard keys use:

  <kbd>Alt + Shft</kbd>

Cloudflare:

The Cloudflare Cache is purged upon deployment in Githb Action: .github/workflows/nextjs-build-export-gh-pages-upload.yml. Secrets are stored in Github, and correspond with the Cloudflare API key and Site ID. More info.

Google Lighthouse:

Google Lighthouse checks are performed upon deployment in Github Action: .github/workflows/nextjs-build-export-gh-pages-upload.yml.

Disqus:

This site uses Disqus for the commenting system on blog pages. Details to configure are in data/siteMetadata.js.

Google Analytics:

This site uses Google Analytics for the analytics. Details to configure are in data/siteMetadata.js.

Google AdSense:

This site uses Google AdSense to deliver ads on the Blog pages. Details to configure are in data/siteMetadata.js.

Ads are displayed in the site with the use of the Ad component: components/Ad.tsx.

Scheduled blog post:

I use the PR Scheduler app (Github Marketplace). The free plan allows for up to 4 schedules per month which I find suitable for my needs.

I create a new branch which contains the new blog post, then make a PR request for the branch. In the PR, I make the comment @prscheduler 01/09/2025T11:05 which will trigger the PR Scheduler app to merge the PR on the datetime specified.

URLs

---

URLs to test:

• http://localhost:3000/sitemap.xml
• http://localhost:3000
• http://localhost:3000/feed.xml
• http://localhost:3000/blog/
• http://localhost:3000/portfolio/
• http://localhost:3000/tags/
• http://localhost:3000/about/
• http://localhost:3000/tags/personal