simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

Overview

Project logo

GitHub release (latest by date) GitHub license

simple-remix-blog is a blog template built using remix.run and TailwindCSS. It supports markdown and MDX for the blog posts. You can clone it and start your own blog in a few minutes. Check out the documentation below to get started.

If you face any issues or have any suggestions, please open an issue!

Demo

simple-remix-blog.vercel.app

Screenshots

Home

Post

Tags

About

Quick start

Run the following command to create a project using this blog template:

npx create-remix@latest --template josemiguel-alvarez/simple-remix-blog

Once you've created the project you have to install the dependencies:

yarn install

and run the dev script:

yarn dev

Your blog should now be running on localhost:3000. There are some example posts in the template that you can remove when you're ready to start adding your own posts.

Then you have to update the app/siteMetadata.js file with your own information.

To create a new post you have to add a new markdown or MDX file in app/routes/posts. The project supports frontmatter, so you can add the post metadata formatted as YAML at the top of the file. Check the posts in this repository if you need an example.

Finally, include the new post in the POSTS constant in the app/utils/posts.server.ts file. The post should be available now in your blog.

Motivation

I built this blog template because I wanted to port my own personal site to Remix. I also wanted to contribute back to the community so I decided to build it as a Remix template.

Features

  • Supports markdown and MDX
  • Easily customizable using TailwindCSS
  • Near perfect page performance
  • Light and dark theme
  • Responsive design
  • Syntax highlighting for code blocks
  • Support for tags
  • SEO friendly
  • About page
  • Cache headers already pre-configured

Contributing

Feel free to open an issue if you have any suggestions or issues. I'll try to respond as soon as possible. You can also open a PR if you want to contribute to the project.

This project has the All Contributors bot installed, so please open a pull request to add yourself to the contributors list. Check the All Contributors documentation.

Contributing guide:

  1. Fork & clone this project.
  2. Run yarn install to install all the dependencies.
  3. Run yarn dev to start the development server.

Contributors

Thanks goes to these wonderful people (emoji key):


José Miguel Álvarez Vañó

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

License

simple-remix-blog is released under MIT License.

Comments
  • feat: Add logo for dark mode

    feat: Add logo for dark mode

    I've added the possibility of adding a logo for the dark mode. It may be possible that the logo does not look ok in dark mode, so it's good to have this possibility.

    released 
    opened by josemiguel-alvarez 2
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump loader-utils from 2.0.3 to 2.0.4

    build(deps): bump loader-utils from 2.0.3 to 2.0.4

    Bumps loader-utils from 2.0.3 to 2.0.4.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.4

    2.0.4 (2022-11-11)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    2.0.4 (2022-11-11)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump loader-utils from 2.0.2 to 2.0.3

    build(deps): bump loader-utils from 2.0.2 to 2.0.3

    Bumps loader-utils from 2.0.2 to 2.0.3.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Count posts visits

    Count posts visits

    Using a database we could very easily count the visits of each posts. For each request of a post page, we would increase the count by one in the database.

    For this, we have to first add the possibility of connecting the app with a database. We can use Supabase which has a free tier.

    enhancement 
    opened by josemiguel-alvarez 1
  • Create a script to automatically display new blogposts

    Create a script to automatically display new blogposts

    Instead of having to manually add each post to: https://github.com/josemiguel-alvarez/simple-remix-blog/blob/main/app/utils/posts.server.ts

    It would nice to have a script that does it automatically.

    enhancement 
    opened by josemiguel-alvarez 1
  • Add Lighthouse CI to prevent regressions

    Add Lighthouse CI to prevent regressions

    Project: https://github.com/GoogleChrome/lighthouse-ci

    Lighthouse CI is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible.

    The idea is to execute it on every commit to prevent regressions in accessibility, SEO, offline support, and performance best practices.

    enhancement 
    opened by josemiguel-alvarez 1
  • Improve page quality score (web.dev)

    Improve page quality score (web.dev)

    There are two main problems now:

    1. How images are rendered
    2. Some errors are logged to the console

    The report can be read here: https://web.dev/measure/?url=https%3A%2F%2Fsimple-remix-blog.vercel.app%2F

    image image enhancement 
    opened by josemiguel-alvarez 1
  • Add comments section

    Add comments section

    It would be great to have a comments section for each post. The comments could be hosted in GitHub by using any of the following 2 libraries:

    • https://github.com/giscus/giscus
    • https://github.com/utterance/utterances
    enhancement 
    opened by josemiguel-alvarez 1
  • Add Optimistic UI when using the SearchForm if possible

    Add Optimistic UI when using the SearchForm if possible

    When searching using the SearchForm we could use Optimistic UI in the following way:

    1. Filter the results that are already available in the client.
    2. Display the filtered results. (Hint: use useTransition hook: https://remix.run/docs/en/v1/api/remix#usetransition)
    3. Display the results returned by the server when available.

    Optimistic UI guide: https://remix.run/docs/en/v1/guides/optimistic-ui

    enhancement 
    opened by josemiguel-alvarez 1
Releases(v1.6.0)
Owner
José Miguel Álvarez Vañó
Software Engineer @Shopify
José Miguel Álvarez Vañó
The simplest way to use AWS/GCP/Azure. From code to cloud in a few minutes.

Utopiops Utopiops is the best way for teams of any size to use cloud (AWS/Azure/GCP), with or without prior experience. We provide a platform that hel

utopiops 98 Dec 25, 2022
This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Gauri Bhand 4 Jul 28, 2022
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
An Open Source Remix template that integrates Stripe Subscriptions, Social Authentication, Testing and a few more features. PostgreSQL version. Deploys to Fly.io

Live Demo · Twitter An open source Remix Stack that integrates Stripe Subscriptions, Social Authentication, Testing and a few more features. PostgreSQ

xo 25 Dec 7, 2022
An Open Source Remix template that integrates Stripe Subscriptions, Social Authentication, Testing and a few more features. SQLite version. Deploys to Fly.io

Live Demo · Twitter An Open Source Remix template that integrates Stripe Subscriptions, Social Authentication, Testing and a few more features. SQLite

xo 135 Dec 31, 2022
Template Repository for making your own budder Module. CORE is not included, this is just for the module.

A quick copy of the "How to make your own module" section Check out the official budderAPI repository Template Repository for making your own budder M

Logic 2 Apr 3, 2022
Import/Export data from and to your database in just few clicks.

Strapi Plugin Import Export Entries Import/Export data from and to your database in just few clicks. Features Import Import data directly from the Con

Baptiste Studer 72 Dec 28, 2022
Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

Stablo Blog Template - Next.js & Sanity CMS Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. Clic

Web3Templates 159 Dec 30, 2022
Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Synthwave Stack Learn more about Remix Stacks. npx create-remix --template ilangorajagopal/synthwave-stack What's in the stack Vercel deploymen

Ilango 56 Dec 25, 2022
🚀 NFTank (NFT tank for dummies) will allow developers to quickly request NFTs to personal wallets or smart contracts in just a few clicks.

??‍♂️ NFTank ?? NFTank (NFT tank for dummies) will allow developers to quickly request NFTs to personal wallets or smart contracts in just a few click

buidler's hub 8 Nov 8, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
A web interface/extension to create minutes of the meeting using A.I.

Inspiration Being in one of the technical chapters of VIT, I and my team realised how chapters and clubs need to continuously engage with their new re

Nanduri Jayant Vishnu 4 Sep 8, 2022
Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu

LIQNFT 111 Dec 15, 2022
Want to preserve your loved one's voices for eternity? Narrate anything using the a voice imprint that can be made in as little as 10 minutes of audio samples. Easy as pie.

Want to preserve your loved one's voices for eternity? Narrate anything using the a voice imprint that can be made in as little as 10 minutes of audio samples. Easy as pie.

Ari 15 Nov 29, 2022
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
Just some burds, jumpin' around in their own little world.

burds! ?? burds! is a weekend hack inspired by this fabulous tweet. It's a little web experiment with tiny animated birds jumping around their tiny li

Linus Lee 60 Dec 1, 2022
Fastest way to get financial data from Plaid into your Postgres database. Go from zero to live in 5 minutes without a single line of code.

Venice Venice is a the fastest way to get financial data from Plaid into your Postgres database. Zero to production in 5 minutes without a single line

Venice 93 Dec 12, 2022
Create content rich websites with ease - built on next.js, contentlayer and tailwindcss

Pliny Note: Pliny is currently in alpha. Expect breaking changes. Pliny makes creating, editing and publishing markdown content easy and simple. It is

Timothy 72 Dec 30, 2022
An easy and simply way to create your own image classifier AI using ml5.js and Google's Teachable Machine

An easy and simply way to create your own image classifier AI using ml5.js and Google's Teachable Machine

Mateus Vinícius de Lima 2 Apr 5, 2022