![]() Gatsby and React are really powerful tools. Albums page with photos from Google PhotosĮverything sounds pretty reasonable until you remember this all needs to be done with JAMStack and no servers.Next step was getting the gatsby-material-ui-starter as a template to add all my blog logic, but first I needed a list of all the features I wanted in my blog, and those were: All it does is link together the Material UI React library into Gatsby. Not only that, but I could even have my source code in a private repo and deploy it to a public repo, this way I can have draft posts without them being public in the codebase.įirst I made this repo based on the instructions from this MUI repo. Since I already know React, going with Gatsby was a no-brainer, and they have excellent documentation and lots of plugins and tutorials and with the release of GitHub Actions, it was possible to build and deploy Gatsby within the GitHub environment without having to use an external service like. I had over 100 posts in my old blog, so it was a big surprise to me to know that there was no way to use a Jekyll pagination plugin v2 and automatically deploy it to GitHub Pages, so I decided to look for other solutions. I also created a Python script to change some data from the generated Markdown files to fit some of my needs. ![]() If you don’t have access to your blog anymore, but still have your `database.sql` file (like me □) just boot up a local version of WordPress to export your posts. WordPress posts are (generally) stored in a database, so I need a way to pull these data and save it as a Markdown file, and the easiest way is to simply use a WordPress plugin, like wordpress-to-jekyll-exporter. Where to start?īefore trying Gatsby, I started with Jekyll, which was a way to create a JAMStack blog and deploy it for free on GitHub Pages, that’s all I needed, but first I had to convert all my posts from my 12 years old WordPress blog into Markdown files with frontmatter variables. I’m using Gatsby to make my personal website, so I can write everything using React components, and the Gatsby framework compiles everything into a bunch of HTML files that are served to the browser. This file structure is something like: - website - index.html - pages - home.html - contact.html - templates - blog-posts.html - content - my-first-post.md - my-second-post.md This is super useful for websites like this one, and this technique is nothing new, all our desktop apps are pre-compiled and served “statically” - let’s forget about SaaS for a second ok?įor example, in this website, I have a template for a blog post page, and then I fill this template with data from a Markdown file. With JAMStack I can create my website the same way I’d do it using PHP, but instead of having the data processed on every request, I can code my whole website, pre-compile it once, and then serve it as static HTML + Javascript files. JAMStack stands for `JavaScript, API & Markup - Stack` and it’s here to bring the best of the old ways into our lives. But what about sites that barely change like blogs or portfolios? The new way - JAMStack This is where most of the websites are now, and with a good reason: Web 2.0 is complex and dynamicness is needed… for most cases, at least. Every time someone requested to see a page on my website, the request would go to my server, which will process the PHP code and serve an HTML page and of course, this costs way more than simply serving static HTML files.Ī PHP website file structure would have something like this: - website - index.php - header.php - footer.php - content - home.php - about.php - contact.php The problem is that my browser doesn’t understand PHP, so I need a server to convert all the PHP logic into static HTML. With PHP, I can split my HTML template into reusable chunks, so I could easily boot up a WordPress website and set up the whole header layout, and then focus only on creating the content for the website. ![]() Of course, this is far from ideal, so other solutions like PHP came in to allow us to make things a bit more dynamic. In this example there is no database, no dynamic data, no compilation, the website is 100% static, I can simply open these files in my browser locally and everything will work without the need of servers, because HTML is pretty much just a plain text with steroids. Then for each of those files, I would have to write the full HTML for that page, even if all of them had the same header or logo, etc. Back in the old (Dreamweaver) days, if I wanted to make a website, I would have something like this: - website - index.html - about.html - contact.html
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |