Summarise with AI
Summarise with AI
I built this website completely from scratch, and am often asked by people how exactly I went about doing that.
Not really, they usually ask me to leave their kitchen and various harshly phrased questions about how I even got in there in the first place and how one human can eat that much salami.
But on the off-chance someone reading this does actually wonder how someone would go about creating the world’s worst blog about a variety of tech nonsense, I thought I would break down the resources and tools I used to build this hunk o’ junk, hopefully to inspire someone to start their own journey.
First things first, I love JavaScript.
Just had to get that out of the way and be ostracised by at least 10% of you.
My website is actually a Node.js application that serves raw HTML files.
Node.js is awesome because a lot of times someone's learning journey is like mine, starting with HTML, then CSS, then JavaScript and then React.
With this learning path, it can be hard to break into backend development, so being able to utilise the skills I picked up learning frontend JavaScript and tweak them to develop the backend of applications and build my own APIs was really powerful.
Originally, I was hosting my site, as well as some of my side projects like TheGC and BuzzCut, through an application called Cyclic.
Cyclic made it super easy to host a Node.js application from a GitHub code base in just a couple of clicks.
However, unfortunately Cyclic recently stopped service, so I have now switched to hosting my Node applications through Heroku, which takes a small amount of learning to get used to but ultimately is very powerful and easy to use.
For front-end development, I also use Netlify, again because it’s so easy to hook it up to a GitHub repo and sync it to the ‘main’ branch so the hosted version updates whenever the main branch does.
I use Hygraph CMS to store, manage and retrieve my written content, and I have to say I have found it amazingly useful and versatile.
It utilises GraphQL, which was a steep learning curve at first, but they have an amazing feature called the 'API playground' which allows you to test queries within the app, rather than having to test in your application and debug.
The ability to customise your schema was a huge galaxy-brain moment and allowed me to develop a tonne of the features in the site today, such as filtering and soon, automatic content suggestions.
My favourite feature on my website is the ‘summarise with AI’ feature.
The average blog page retains a user for 52 seconds (for my site it’s about 62 seconds, which means I’m just above average in something, finally), so having a way to summarise content to match attention span is really vital.
I use the OpenAI API to do this, and it’s by far my favourite API I’ve ever played around with. I’d highly recommend any webmasters check out my blog on ways you can use the OpenAI API in your own website, as it’s power is immense.
Soon, I’m going to develop some features based around Colossyan’s text to speech features, potentially so you can listen to my content rather than read it, so keep your eyes (and ears) peeled!
I use two databases for my different projects.
The first for more heavy duty projects (like the commenting feature on this site) is MongoDB, which is a super flexible database. I loved using it because it tracks with my knowledge of JavaScript and it’s non-relational and heavily customisable, which is perfect for my projects.
For smaller projects, I use AirTable as a database, as it’s fast, reliable and the data is structured really nicely on the backend and their mobile app is super easy to use. I’d recommend this to any marketing team, especially if you want to build custom lead gen pages, or a newsletter list, as it’s perfect for data collection and quick exports to an email marketing platform etc.
I use GA4 to track visitors to my site, and also Google Search Console to measure SEO performance. To make it a Google hattrick, I use Google Keyword Planner for my keyword research as well.
There’s two reasons I don’t use something like SemRush.
The first is that Google Keyword Planner and Search Console are both free, and due to my wildly speculative investments into Mongolian sheep racing teams, I need a cost effective solution to ease the pain on my wallet.
The second is that for SEO performance, I love going directly to the source for my data. Google will know with a far higher degree of accuracy the search volumes for specific key terms, and using SemRush for a small site like this feels like using a sledgehammer to crush a walnut.
My website has undergone a monumental amount of design changes since I began it in the heady days of 2018.
To design these changes, I use Figma for prototyping and find the html.to.design plugin super helpful to be able to quickly import my pages and test out any changes I might want to make before breaking ground on code.
Just as I’m a self-taught coder, I’m also a self-taught designer, so I usually use Pinterest for UI/UX inspiration, which is super helpful and also gives me an opportunity to use social media whilst pretending to be productive.
An important part of building my website is that I am constantly learning and trying new things. This thing doesn’t drive any revenue for me, I do it because it’s fun and it’s a great sandbox for trying out new languages, frameworks, analytics techniques and a chance to practise my writing.
When I was learning coding basics like HTML, CSS and JavaScript, I used w3schools.com extensively and I couldn’t recommend it enough. I tried to complete two sections a day, and found their microlearning style super easy to adopt after a 9-5 day job.
For more complex stuff or specific problems I’m having, I typically like to watch YouTube tutorials or read Medium articles. It’s amazing how much user-generated content there is out there to help hapless wanderers like you and I.
Also, and this just may be my learning style, I need to physically play around with what I’m trying to fix, and potentially break it some more to finally understand it. Because of this, I love creating small sandbox projects where I can tinker and play with the code so that I can determine what I need to work on.
There you have it, a comprehensive overview of how a man who’s doctor described him as ‘markedly more intelligent post horse head kick’ managed to build a functioning website from scratch!! If you want any more information or have any questions about starting your own coding journey, feel free to leave a comment or drop me a DM!
Load comments
Comments
No comments yet, be the first!