Introduction
When I started blogging, I had limited coding experience, so I wanted to use a block editor. There are many block-based website builders. The one I like the most, Gutenberg, is built by WordPress. N.B., this post is not sponsored.
The user interface for WordPress’ block editor is seamless. Additionally, the WordPress platform is open-source and free of cost. Plus, you can build upon it if you become serious about blogging.
WordPress developed most of the components on my blog. However, some blocks are edited or imported from other places. As a result, if you are only using a block editor, it may be difficult to replicate my blog without some coding knowledge.
If you want to learn more about the design of my website, read Design Elements of My Website.
An opinionated note: blocks, templates, and other shortcuts
Some tech folks look down on anyone who uses a block editor or templates. This is silly. Templates and blocks save a ton of time. Furthermore, many templates and blocks are developed by folks who understand design and code.
Blocks and templates help you create a beautiful blog. They are much cheaper than hiring someone to design and build your website. Furthermore, if you choose, they can help you learn about web development.
P.S. If you want a website but are uninterested in web development, that is totally ok! Blocks and templates are a great avenue for you. If you have the money, hiring a developer also works as well. I recommend searching LinkedIn for “student freelance developers,” many universities like RIT have web development majors with skilled students looking for freelance work.
🌸👋🏻 Let’s take this to your inbox. You’ll receive occasional emails about whatever’s on my mind—offensive security, open source, academics, boats, software freedom, you get the idea.
WordPress.org versus WordPress.com
Please note that there is a difference between WordPress.org and WordPress.com. The .org allows you to host your site; this is very popular. The .com allows you to build, host, and manage your site; this is less popular, but is great for beginners or people just looking to have a low-maintenance website.
Gutenberg
WordPress has a block editor called Gutenberg; this is the primary thing I used to develop my website. If you do not want to code, you can use blocks through Gutenberg. If you use the WordPress online client, you will have this installed automatically.
Gutenberg is what makes the magic happen. It seamlessly connects the user interface to the backend of your website. If you want to examine the source code, you will probably want to look at the packages to see a broad view of the functionality and components for some of the features heavily interacting with blocks inside the editor.
Learn about building Gutenberg and navigating the source code here.
Blocks
Inside the Gutenberg editor are blocks. Each block represents a feature or design.
Here is an example of an accordion block:
Example accordion
Example text inside the accordion
Here is an example of a list block:
- Example list
WordPress’ provides a list of blocks on GitHub along with their source code. Note that you can view the HTML and CSS of my website by right-click the page → select "View Page Source".
Themes
If you do not want to start with a blank website, there are many themes available for free on the internet. Here is the code for all of the WordPress themes. If you already have a theme in mind, you can import or create one.
I have used three themes on my website, and my site has looked almost identical despite changing the themes. This is because I use the same WordPress blocks, colors, and CSS styling.
CSS
Note that CSS styling does not do much alone. As you can see on CSS Zen Garden many websites can use the same CSS and look completely different.
I have a bunch of CSS that I used on my site here. Also note that I received help with the CSS from r/WordPress, r/WordPressPlugins, StackOverflow, and WordPress support.
Custom HTML
I do not use custom HTML that much because I am content with the WordPress blocks. I think the only areas I have custom HTML on are my About and Contact pages, specifically the social media icons.
Shout out to Wyatt Tauber for teaching me how to do this!
To get this on my Contact page:
I used:
<a href="mailto:gallucci@protonmail.com">
<img src="https://img.icons8.com/nolan/50/apple-mail.svg">
</a>
<a href="https://www.linkedin.com/in/olivia-gallucci">
<img src="https://img.icons8.com/nolan/50/linkedin-circled.svg">
</a>
<a href="https://github.com/oliviagallucci">
<img src="https://img.icons8.com/nolan/50/github.svg">
</a>
<a href="tel:+19083016852">
<img src="https://img.icons8.com/nolan/50/apple-phone.svg">
</a>
<a href="https://twitter.com/oliviagalluccii">
<img src="https://img.icons8.com/nolan/50/twitter.svg">
</a>To get this on my About page:
I used:
<a href="https://www.linkedin.com/in/olivia-gallucci">
<img src="https://img.icons8.com/nolan/50/linkedin-circled.svg">
</a>
<a href="https://twitter.com/oliviagalluccii">
<img src="https://img.icons8.com/nolan/50/twitter.svg">
</a>Conclusion
Website development is difficult, especially when you try to get fancy. Even though I am publishing a post on “how I developed my website,” my website will continue to be in the development stages for a long time.
My primary future goals include ensuring each page is accessible. Other goals include:
- Compatibility with dark mode
- In-house dark mode option
- Compatibility with reader-mode on phones, tablets, and computers
Post inspiration
My friend asked me if I could send her a local deployment of my website, so she could use some of the code on her website. Unfortunately, the full-site download option that WordPress.com includes images and personal information because it is for backups.
After contacting support to see if there was another way to download the website, I learned that there is no option to only download the code as of June 2022. I find this strange because everything I use is open source. At the same time, WordPress supports proprietary products through vendors who create plugins, custom themes, blocks, etc.
If there is a safe download option in the future by WordPress, I will host the download on my website, so everyone can access it. Make sure to check the corresponding software licenses, so that you are using the code legally!
At present, the best I can do is write about the development in this blog post and provide some of the custom CSS on my website.
