I love Notion, I envy their illustrations more than I care to admit… but thats besides the point. I think it’s a great tool which offers an incredible amount of flexibility to tackle a vast range of tasks. Add some collaboration in there with a sprinkle of organisation and you’ve got something special. I thought great let’s collaborate on some boring document work and we can just export it to markdown, upload it and revel in our mastery of the internets. However… A bit of a snag was hit.
Within this post I’m going to be venturing into the world of Gatsby, creating a blog and then documenting about the blog within that (see why the post is called blogception 😅). I’m basically going to be writing the post whilst doing it so I’ll try and document my thoughts and struggles and they come and go. Lets begin…
First of all we are going to get the gatsby blog starter up and running locally.
$ npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
I’m using npx here because I prefer not to have any node modules installed globally.
Now let’s cd into…
In a recent project I came across a nifty way to create a masonry grid layout using CSS grid and a smidge of javascript . Initially I thought about using something like Masonry.js or Isotope but it kinda felt a little bit overkill. Whats cool about this approach its super flexible and it’s not relying on any frameworks! I’m going to try and keep this post short and sweet so you can get up and running and enjoy this trick yourselves.
Lets get started by adding some HTML to an index.html file
Here we have created a simple grid…
Vuepress is the new hotness when it comes to static site generators. Vue creator Evan You developed this tool to write documentation, however it is so powerful and flexible it can be fully customised to fit your needs 💪. Today I’m going to show you how to create a blog using Vuepress.
This tutorial presumes you have a basic understanding of Vuepress.
The structure of this project:
. ├── docs │ ├── .vuepress │ │ ├── components │ │ │ └── Posts.vue │ │ ├── config.js │ │ └── public │ │ ├── image.jpg │ │ ├── image-1.jpg │ │…
Designer/Developer for Missguided. Co-organiser of FCC MCR