baobabKoodaa / Blog
Licence: other
Source for my blazing fast blog
Stars: ✭ 83
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Blog
Dantecalderon.dev
💻 ❤️ My personal website
Stars: ✭ 51 (-38.55%)
Mutual labels: blog, gatsby, gatsbyjs, website
Gatsby Theme Chronoblog
⏳ Chronoblog is a Gatsbyjs theme specifically designed to create a personal website. The main idea of Chronoblog is to allow you not only to write a personal blog but also to keep a record of everything important that you have done.
Stars: ✭ 101 (+21.69%)
Mutual labels: blog, gatsby, gatsbyjs
Flutterminimalwebsite
A minimalistic Flutter website template for blogs and portfolios. Demo: https://gallery.codelessly.com/flutterwebsites/minimal/
Stars: ✭ 180 (+116.87%)
Mutual labels: blog, blog-theme, website
Blog
My blog created with React, Gatsby & Markdown
Stars: ✭ 29 (-65.06%)
Mutual labels: blog, gatsby, gatsbyjs
Devblog
A lightweight, customizable personal blog template built with GatsbyJS and React
Stars: ✭ 312 (+275.9%)
Mutual labels: blog, gatsby, gatsbyjs
Gatsby Starter Prismic
A typography-heavy & light-themed Gatsby Starter which uses the Headless CMS Prismic.
Stars: ✭ 381 (+359.04%)
Mutual labels: blog, gatsby, gatsbyjs
Gatsby Material Starter
A high performance blog starter with Material design in mind for GatsbyJS.
Stars: ✭ 456 (+449.4%)
Mutual labels: blog, gatsby, gatsbyjs
Gatsby Starter Minimal Blog
Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
Stars: ✭ 752 (+806.02%)
Mutual labels: blog, gatsby, gatsbyjs
Gatsby Starter Prismic I18n
Based on gatsby-starter-prismic with Internationalization (i18n) support
Stars: ✭ 77 (-7.23%)
Mutual labels: blog, gatsby, gatsbyjs
Gatsby Starter Portfolio Cara
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Stars: ✭ 1,101 (+1226.51%)
Mutual labels: gatsby, gatsbyjs
Gatsby Material Ui Business Starter
Beautiful Gatsby Material UI Business Starter
Stars: ✭ 62 (-25.3%)
Mutual labels: gatsby, gatsbyjs
Junhobaik.github.io
Blog, Gatsby Theme(Starter), Built with Gatsby
Stars: ✭ 63 (-24.1%)
Mutual labels: blog, gatsby
Jamtemplates.com
Curated collection of free Gatsby themes.
Stars: ✭ 47 (-43.37%)
Mutual labels: gatsby, gatsbyjs
Resume Builder
Resume Builder is a free open-source project that allows anyone to easily maintain and build any kind of resume.
Stars: ✭ 62 (-25.3%)
Mutual labels: gatsby, gatsbyjs
Nord Docs
The official Nord website and documentation
Stars: ✭ 63 (-24.1%)
Mutual labels: gatsby, website
Wechaty.js.org
Wechaty Official Website for News, Blogs, Contributor Profiles, and Documentations.
Stars: ✭ 69 (-16.87%)
Mutual labels: blog, website
Gatsby Starter Spectral
Gatsby.js V2 starter template based on Spectral by HTML5 UP
Stars: ✭ 34 (-59.04%)
Mutual labels: gatsby, gatsbyjs
Himself65.github.io
My blog / Gatsby / React / TypeScript / Awesome
Stars: ✭ 63 (-24.1%)
Mutual labels: blog, website
Blog
Have a peek »»» https://www.attejuvonen.fi
Features
- Responsive and streamlined design.
- GatsbyJS compiles the blog into HTML+CSS+JS so hosting the blog costs nothing at providers like Netlify.
- Blazing fast UX: The website is visible and functional after only 1 round trip and ~20kB of data. That first round trip can be super fast to anywhere in the world, because the blog is only static assets which can be delivered by CDN. Subsequent pageloads render ~instantly thanks to link prefetching.
- Autogenerated tracedSVG image placeholders are stylized to create a smooth look and transition as the image loads without the page jumping around.
- Write blog posts into Markdown files (easy to format and content will not be married to any platform).
- Expandable: possible to embed custom React components into Markdown.
- Posts organized by tags.
- Teasers of posts are generated to front page with infinite scroll which gracefully degrades into pagination.
- Allow readers to be notified of updates with RSS feed and email newsletter.
- Contact Form.
Feel free to fork
You are free to use this repo to create your own blog (code is MIT licensed). You may also use the written content in this blog however you like, provided that you give appropriate credit (CC BY 4.0).
How to create your own blog with this repo
- Basic setup
- Prerequisites: learn about ReactJS and GatsbyJS.
- Recommended: Use
nvm
to switch between Node versions. This project is confirmed to work with v12.16.3. - Fork and
npm install
. - Run in development mode with
gatsby develop
. First run will take several minutes, but subsequent runs will be faster. - Run in production mode with
gatsby build && gatsby serve
(or./fastbuild.sh
). If you want to deletecache
andpublic
before building, use./slowbuild.sh
(recommended for releases to avoid leaking development data). You may have to make the scripts executable before you are able to run them (chmod +x filename
).
- Make it your own
- Go through everything in
content/meta/config.js
andcontent/pages
andcontent/parts
- Search all files for "atte".
- Replace
static/preview.jpg
(this is the image that is used when someone shares a link to your blog on a social network like Reddit). Recommended aspect ratio is 1.91. - When you publish, make sure caching and redirects work reasonably. I recommend Netlify, in which case cache configuration in
static/_headers
is fine and you just need to edit 1 line instatic/_redirects
. - Move your own icons into
src/images/app-icons
, runnpm run generate-app-icons
, then replacestatic/favicon.ico
. - Environment variables can be set in a
.env
file. It's good practice to keep it in.gitignore
so it doesn't get published to the repo. When you publish your website, find out how you can add environment variables to your host without publishing the.env
file. If you are wondering why environment variables are used, it is to prevent people from accidentally spamming (for example, people who forked this repo used to test the contact page by sending me messages like dffdsffdsfd). - There is an e-mail newsletter link on the
Subscribe
page. Remove it or set up a newsletter and add the URL as an environment variableEMAIL_SUB_LINK
. - There is a Contact page. Remove it or set up handling for your form submissions. The POST address where forms are sent is defined in environment variable
CONTACT_POST_ADDRESS
. I'm using Google Script to handle form submissions. If you also want to use Google Script, instructions are here and here is an improved version of the script. - [OPTIONAL] If you want a "Hero" section at the top of the home page, just set
hero.hide
tofalse
intheme.yaml
. - [OPTIONAL] If you want Plausible Analytics: add
PLAUSIBLE_DOMAIN=mywebsite.com
to environment variables.
- Go through everything in
- Creating content
- Blog posts are in
mock_posts
andposts
folders. By default only mock posts are used (to help you tweak the website before you have a lot of content). You can switch to real posts by creating an environment variablePOSTS_FOLDER=posts
. Please try not to accidentally repost my real posts if you are only tinkering. - When you create posts, a folder with a name like
2020-03-05--my-book-review
will be published, whereas a name likemy-book-review
will be considered a draft and will not be published. There are ways to accidentally publish drafts. If you are worried about that, the easiest way to avoid it is to deploy your site from GitHub via Netlify and never commit draft posts to the repo. - You have to manually crop images to 2.222 aspect ratio.
- Blog posts are in
Attribution
Hi, I'm Baobab. I didn't do everything by myself; I leveraged the work of many awesome creators.
- Photos are mostly from Unsplash, hover over to see photographer attribution.
- Icons are mostly from FontAwesome.
I started building on top of Greg Lobinski's excellent hero-blog-starter. Main changes from Greg's version:
- Fixed draft posts (used to leak draft posts into production)
- Fixed RSS feed
- Dates were added to RSS items so that RSS readers are able to tell which content is new.
- Non-post pages removed from RSS feed.
- Fixed 404 page (text used to be hidden under header)
- Contact page entirely redone.
- Had a font issue caused by antd library. I was unable to reproduce the issue locally to find what was causing it, so I redid the entire form without the library.
- Submission used to require entire web site to be hosted on Netlify. Now the Contact Form submission uses Google Scripts and web site hosting / form handling can be changed independently.
- Submission works for users who have JS disabled.
- Allow multiple tags (used to be just 1 category per post)
- Allow custom React components inside Markdown files.
- Added 'Subscribe' page, so users know that RSS feed exists (the page also contains a link to email newsletter)
- Added infinite scroll, which gracefully degrades into pagination.
- Many design changes. Spent a lot of time tweaking image placeholders 💎 Removed and simplified a lot of features to create a less cluttered look (matter of preference, eye of the beholder and so forth...)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].