Today I got round to installing friendconnect on this blog. This means that everyone that has a gmail account can log in and become part of the community sprouting from this blog. You can also comment about things in general now.
There’s a new layout now, as a result information is easier to find and the whole site should load quite a bit faster.
Today I used Laravel to code a Twitter clone called Chirper via the tutorial you can find here. The tutorial took about two hours before I got the notifications section of the tutorial. The tutorial is easy to follow and with my contextual knowledge I was able to write most of the code with a minimum of errors. The tutorial follows the CRUD model, Create, read, update delete, and adds in notifications for good measure.
I chose to follow the Blade course rather than the React course because at the moment I feel more at ease with PHP thank JavaScript despite spending months on JS courses. What I like about PHP and Laravel is that when there is an error the code will show you the code with an error and you just need to understand what it is.
With JavaScript and especially with typescript the error message provides you with code that is hundreds of lines away from what is causing the code to fail. It takes seconds or minutes rather than hours to debug an issue.
Although building a twitter clone might not sound exciting, it is worth doing. Creating, reading, updating and deleting are key parts of Content Management systems so if you can do it for content with 255 characters you can easily expand it to blog posts, articles and more. It also means that you have a chat app to use within a small group of friends.
The next step, once I finish the course, is to adapt the code to get the content from my website to work via the Laravel framework. For the next step I want to read documentation. Watching video tutotirals is great sometimes, but it’s time consuming. The next step is to read documentation, and understand it. I have spent enough time building context. Now is the time to put this knowledge into practice.
When looking at Codeberg as a European alternative to github I came across mentions of Pelican, a static blog generator. Yesterday I spent several hours setting it up and playing. Whilst playing with it I saw some opportunities.
By default Pelican is designed to have one category per blog post. For small websites this is fine. It encourages people to focus on three to five topics, and ensure that each topic is clearly visible in the nav bar at the top of the page.
When I imported two different wordpress blogs I had success is importing the blog posts, but a failure when it came to the nav bar.
How Does Pelican Work
Pelican can use html, reStructuredText or markdown. It wants to know the date, tags, category, slug, authors, summary and more for each page. Once a page has this information, as well as some content you type “pelican content” and it will generate the static website for you. You can then test the site with pelican listen and check that the website is displaying and working as desired.
Categories
If I wrote a blog post about hiking in Vaud, Switzerland I would have that blog in “hiking”, “Switzerland” and “Vaud”. Pelican combined the three categories and created a nav page. The result is that I had a bloated nav bar.
When I enquired about parsing the categories I was told that Pelican wanted to have one category per page, intentionally. They also told me that a plugin allows you to create more categories. This plugin is quick and easy to install and implement.
More Categories
With More Categories you can add several categories per blog post, but you can also add a hierarchy. If you write a post about hiking in Vaud, Switzerland, you can have hiking, vaud, switzerland, as a flat hierarchy. You can also have “sports/hiking” and “Switzerland/Vaud” as subcategories. This opens up the possibility of creating a nuanced static website.
Importing a Website
You can import content from another source by using pelican import. You can choose from Blogger, Wordpress etc. I experimented with importing from Wordpress and it worked well, except for the issues I mentioned earlier.
Streamlining an HTML Site
My website is split into three parts
• the main blog
After the two tests I ran yesterday I came to the conclusion that, for now, I will keep using wordpress for the blogs. The reason I think Pelican is interesting for me is that it can read html and the legacy part of my website is html. The challenge with legacy code is keeping the navigation and other parts up to date each time you make small changes. With Pelican I hope to delegate navigation creation. By ensuring that each page has the correct meta data in the header I can then get Pelican to regenerate the website with a navigation that is easier to keep up to date.
Measuring Success
If I am successful then I will have the website imported into Pelican and I will have a geography, environmental systems, Ancient Rome, and other sections and one or two sections will have themes that are specific to them.
If I had been smart I would have changed career path around 2006-2007 when I was in London surrounded by entrepreneurs and web developers, rather than now during a pandemic. Normally I struggle to find new contracts because of two things. The first is that for camera and editing work there are very few opportunities per year, and the opportunities that do arise have hundreds, if not thousands of candidates so the probability of success is low. The other issue is that because there are few jobs, if you fail you may have to wait months for an opportunity to appear.
That’s why I have spent the entirety of the pandemic reskilling. Every single day I study web development. I have gone from IT support courses, to CSS to HTML, to Javascript to frameworks and back to JavaScript. The journey is long and hard. When I was finally free to study Angular in depth I found that my knowledge of Javascript was not deep enough, so I went back and studied on JS pathway, and now I am studying a second one on Linkedin Learning. My goal is to be proficient. This isn’t a one day goal. This is a journey.
You can follow my journey on github to see what I am learning. One of my side projects, to practice what I have learned is this one. At the moment it is a simple app that retrieves a random image from my instagram gallery and displays it with its title. This self-project is worthwhile because it is easy to follow a course and code along with the teacher. The problem with this is that when there is no teacher, and no model you need to innovate and find your own solutions.
Last year when I tried something similar I found a way to convert from Json to CSV to bring it into Wordpress. Now I am working with Fetch, random number generators to find a post, let to be within the scope of one block, converting epoch time to human readable date and time, and more. If I followed instructions I would find it easy to do, but I couldn’t find any, so I am experimenting with ideas from courses. The next step is to find how to use classes and ids’ to embellish it with CSS.
I started with the random post generator. The next steps will be to use constructors, for each loops, display ten posts at a time, but also to enable finding them by year and month. I can also add more metadata fields than I can with Instagram. I could add country, type of landscape and more. I can practice building a CMS from the ground up. In letters of motivation I wrote about learning about Media Asset management tools from the ground up, and now out of curiousity, that is what I am doing.
It has taken a while to understand how Javascript works, but now that I have I can spend more time experimenting and learning each day. My increasing proficiency will be shown through the projects I build in courses, but also the self-led project.
Sometimes I add comments to commits, to explain what I found hard, and then I show the code that resolved the issue. If you’re curious as to why I would use a self-hosted json file and media files the answer is simple. I don’t need to go through the process of asking for permission to acccess an api to access my own data. For an example of working with ajax and json you can refer to this project.
When you work in the media and broadcasting you constantly need to look for opportunities, to face rejection, and continue looking. With the skills I am learning now people are already interested, and that is the reason to change from skills that are less interesting, to those that are.
In theory WordPress is a fantastic tool to write a blog, without needing to learn to code. In practice I am tired of WordPress and I have been tired of WordPress ever since they started to use blocks, and ever since I noticed that it uses React.
React and Meta
I know that PHP was developed by Facebook, and that we use it all the time, but I also know that React was developed by Facebook as it was morphing into Meta, the destroyer of the independent web. Instagram and Whatsapp were destroyed by Facebook, as the monopolist took over those accounts.
Blocks and ClassicPress
I am not alone to feel this way. I see that there is the ClassicPress community. I tried ClassicPress and it works, but it feels like time could be better spent with a different project, that diverges, and has a more concrete direction than “We don’t like blocks”. I am oversimplifying. I realise it’s more than that.
Hugo
After playing with Hugo for a week or two I think that this would be a very nice solution. I don’t need comments, and I don’t need a complicated backend for the type of blogging I do. I believe that Hugo would easily fill the gap left behind by WordPress.
Dormant WordPress
If and when I do make this change I won’t convert my WordPress blog to Hugo. I would simply create a new directory and write blog posts that would go there. I am still not certain of my strategy. For now the goal is to have my static website running Hugo cleanly, before then adding the blogging section. Within the next week I should be ready to make the leap.
And Finally
Before WordPress I tried plenty of different content management tools and services, as can be seen in the wayback machine. I am migrating, primarily because I want to try something new. I want to learn how to use a new tool and expand my skills, rather than have them plateau. The reason for the switch can be described in a single word. Curiousity. I am curious to see how I can use this “new” tool, to blog, with a different workflow.
Transitioning from WordPress to Hugo is tempting because I don’t need an entire CMS for what I’m doing. What I need is a centralised system that checks for tags, titles and the theme, and updates the navigation as I add new pages. You don’t need a CMS for that.
If you go through the meta data for many of my static pages you will see that they were created with dreamweaver, frontpage 2000 and other solutions. The aim of these was to create an application that would prepare the html and navigation for pages, so we could concentrate on content creation. This was before the age of the CMS.
If you want to create a simple blog, without changing much the learning curve for WordPress and Hugo is short, compared to what is required for Laravel, Angular and other solutions. You create content and there are tools that will take care of almost everything else.
With Hugo and WordPress you can, theoretically, start creating content and sharing it within minutes, or even seconds, depending on how many times you have set things up before.
With Hugo if you want to create a simple page you can use markdown and save a lot of time and effort. You focus on headings, images, lists and hyperlinks. If you want to have more flexibility you can generate an HTML page, and with this you can do anything you want, and have the experience, to do.
I need to find a solution to a problem. I have a blog with thousands of articles so I have thousands of markdown pages in a single directory. I considered using the creation date with year-m-d-article-title.md but if I do this then Hugo will use that as the headline for new blog posts. I would need to edit the Title of new posts, to remove the date information. For the public folder, once the blog is exported the files are tidy.
Hugo likes to create a folder and file for every single page. The result is that every page has its own folder. That’s fine, when everything is working well, but chaotic every time you make changes. At the moment of writing every change generates 6000 files and folders. That’s 10-20 seconds per export, and this doesn’t include the upload time.
When you’re using a CMS like wordpress changing a theme takes seconds. You find a theme, apply it, and a few seconds later you’re ready to role. With Hugo if you change the theme you need to regenerate and then reupload the website in its entirety. Small changes become big changes. Having said this, with a static website, managed by hand, rather than Hugo, this would take hours, rather than seconds.
I see that Hugo is fast and flexible. It provides the organisational features of a CMS with the flexibility of HTML pages, when that is desired. This makes it easy to circumvent the limitations that are imposed by markdown, for those that want to embed videos or other features into a specific web page or blog post.
Hugo requires no back end. Anywhere that you can upload html, can display a Hugo website, or individual pages. You have the ability to tell Hugo where the files will be on a server, so that links are built to play nicely. Both the static part of my website, and the blog may soon run via Hugo.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
On a related front, what's the story with your twitter account?
Deleted it because I was fatigued by my other account, was going to give up twitter for good. In the end I went back to the secondary account though. When twitter repair the restore function I may restore the old one. We’ll have to see.