{"id":23364551,"url":"https://github.com/tobysolutions/react-markdown-blog","last_synced_at":"2025-08-12T09:09:08.104Z","repository":{"id":267470430,"uuid":"899921727","full_name":"tobySolutions/react-markdown-blog","owner":"tobySolutions","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-07T11:38:00.000Z","size":140,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-07T04:51:55.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tobySolutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-07T11:37:58.000Z","updated_at":"2024-12-08T14:49:08.000Z","dependencies_parsed_at":"2024-12-10T15:13:56.310Z","dependency_job_id":"e591c501-4e44-403e-93f4-6be92178ee69","html_url":"https://github.com/tobySolutions/react-markdown-blog","commit_stats":null,"previous_names":["tobysolutions/react-markdown-blog"],"tags_count":0,"template":false,"template_full_name":"codemzy/static-blog","purl":"pkg:github/tobySolutions/react-markdown-blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobySolutions%2Freact-markdown-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobySolutions%2Freact-markdown-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobySolutions%2Freact-markdown-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobySolutions%2Freact-markdown-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobySolutions","download_url":"https://codeload.github.com/tobySolutions/react-markdown-blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobySolutions%2Freact-markdown-blog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270033108,"owners_count":24515421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T13:16:58.540Z","updated_at":"2025-08-12T09:09:08.057Z","avatar_url":"https://github.com/tobySolutions.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Static Blog\n\nJust a template to create a really simple static blog site using React. Yes, I know, you can use Gatsby or Next.js to create static sites with React, and they are great for a totally custom set up. But this is for a REALLY simple static blog. You can literally add a few markdown files and have your blog up and running. And because it's focused on blog writting, it has a few features that work out the box:\n\n- Scheduled posts\n- Category pages\n- Author pages\n- JSON-LD schema scripts on blog posts\n- RSS feed builder\n\nAnd coming soon...\n\n- Popular posts\n- Search\n- Social sharing\n- Themes (One day... Maybe!)\n\nIt also comes with Tailwind installed as default for some beautiful css.\n\n- React\n- Tailwind\n- Static\n\nThat's all. And, you don't need to know React or JSX to get started. Just markdown, add your posts, and your blog will work.\n\nNo hot reloading, no complex webpack set up. It's static. It turns React and Markdown into HTML. It keeps your CSS and JavaScript separate. \n\n## Set Up\n\nYou can the 'use this template' button to create a new repository for your blog. Give it a name, and then clone your new repo to your dev environment (local or in the cloud like Gitpod or Glitch). It's a bit tricky to get updates from a template repo as your new repo will have a different git history. **If you want to get updates as I add them to this template, it might be best to clone the repo (rather than the 'use this template').** Alternatively if you use the template, when I add a new feature you can download the new template, and add back in your posts and customisations. I'm going to leave that choice up to you!\n\nIf you will want to upgrade for new features from the template in the future, the best way is to only add posts in `/posts` and change settings in `/settings`.\n\nYou're going to need NodeJS installed for the dev server (but since this is static, in production no servers are required).\n\nNow go to the `/settings` directory. In `/settings/blog.js` add the name for the blog and decide if you want your blog as the main site or in subdirectory like `/blog`. There's a bunch of notes in there to help.\n\nFirst run `npm install` to install the dependencies needed to build the blog.\n\nTo preview your blog run `npm run dev-build` followed by `npm run dev` to see your blog on port 8080 (http://localhost:8080). No hot reloading currently so if you add a new post run `npm run dev-static` to create a new build if your pages and `npm run dev` to start the server again. \n\nNote: `npm run dev-static` will just build the pages, not the css or js. If you make changes to any settings, css or js, you can run `npm run dev-build` to create a clean fresh build of everything.\n\n## Blog\n\n(basic)\n\nThis is where you should start. If you're not building a blog, this probably isn't the right repo for you. \n\nIn the /posts directory you will add your blog posts in markdown format. Use YAML at the top to provide information about the post (title, description etc.)\n\nThe file name format is `YYYY-MM-DD_the-blog-post-path.md` with the date being the date for publishing the post. If you want to schedule a post for a future date, use the future date and the post won't go live until you build the site on that date or after (it will get built on your dev build so that you check how it looks etc - if you want to see how the site will look in production without future posts run `npm run build` instead).\n\nThe YAML format is as follows (don't include any markdown in your YAML data)\n\n```\n---\ntitle: This is the blog post in title\ndescription: This is a description about the blog post. It will be the introductory paragraph used in search results, on blog list pages, and at the top of the blog post. It's pretty important.\nimage: https://images.adomain.com/blog/your-image.jpg // (optional) This is optional and will be a URL to an image you would like to be used when sharing the post on socials (goes in the schema and header data)\ncategoryId: product-x // (optional)\nauthorId: codemzy // (optional)\npublished: YYYY-MM-DD // ISO Format include the time also if you want to '2021-10-01T14.30\nupdated: YYYY-MM-DD // (optional) include an updated date here if you are updating an old post\n---\n\n## Now we can use markdown\n\nLet's write a blog post...\n\n```\n\nIf you want schedule and update a post, don't alter the orginal file. Use the same blog post path as the original post, and change the date to the date for the scheduled update (you will have two files, one with the orginal post that stays live and one with the updated post which will go live once the date is reached and replace the orginal post).\n\nI've included some example blog posts to get started.\n\nYou can customise categories (`/settings/categories.js`) and authors (`/settings/authors.js`) or remove them if you don't need/want them.\n\n## Deploy\n\nTo deploy `npm run build` will create the production build, which will be in the `/dist` directory.\n\n---\n\n**Optional Extras**\n\n## Pages\n\n(more advanced)\n\nYou might want some extra pages. Some blogs might include an About page for example. I've done a custom 404 Error page already.\n\nI used React for templating, so you can re-use components across pages etc. Don't include any Javascript in the React though, it won't work. See the Javascript section for that.\n\nTo add a Page go to /components/Pages and add a React component for the page. Then you will need to add it to the build in `build/pages.js`.\n\n## CSS\n\nThe blog is styled out the box, but you might want to add your own CSS. I use Tailwind CSS, so you can add any tailwind styles to your components and they will automatically be included in the build.\n\nIf you want to add any custom css, do it in `/css/styles.css` for global styles, or you could add another stylesheet for specific pages e.g `contact.css`, it will automatically get included in the build and you can include a script on any pages it's needed like `\u003clink href=\"/css/contact.min.css\" rel=\"stylesheet\" /\u003e`. \n\nIf you make changes to the css run `npm run dev-css` and `npm run dev` to see the updates.\n\n## JavaScript\n\nYou can add any custom Javascript for your site in `/js/index.js`. Then in `/components/Main.js` uncomment the `\u003cscript src=\"/js/index.min.js\" async\u003e\u003c/script\u003e` tag in the body.\n\nIf you make changes to the css run `npm run build-js` and `npm run dev` to see the updates.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobysolutions%2Freact-markdown-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobysolutions%2Freact-markdown-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobysolutions%2Freact-markdown-blog/lists"}