If you click an affiliate link and subsequently make a purchase, I will earn a small commission at no additional cost (you pay nothing extra). This is important for promoting tools I like and supporting my blogging.
I thoroughly check the affiliated products' functionality and use them myself to ensure high-quality content for my readers. Thank you very much for motivating me to write.
Introduction
Dear all,
I have received many messages asking me how I created this website. I could not resist writing about my setup, which I have polished over the years, and I am still improving to my liking. I love the simplicity of GitHub pages that allow me to create this blog so quickly and without much maintenance overhead that it looks like magic :)
Before, I created websites with PHP or WordPress and tried other publishing platforms. However, using these complex installations requires maintenance and constant updates, which is a considerable overhead once you want to focus on content.
This is why I have decided to host with GitHub pages, using Markdown, some HTML and CSS, and a few JavaScript.
I am so happy with this lightweight approach, which gives me total control over the process. Naturally, Git is for versioning, and I like storing all my versions; sometimes, I roll back when something goes wrong.
Indeed, I also do SEO to bring organic traffic to my website and use AI-generated art and AI writing assistants to create blog post drafts.
Additionally, I use a form submission service, which helps me get comments and subscription requests while providing spam filter and captcha support.
In this post, I will explain everything in detail, step-by-step, that you can do it yourself. It will be a breeze!
Steps for creating a website on GitHub
Creating a website or blog hosted on GitHub involves several steps. Here’s a list of main steps to guide you through the process:
- Set Up a GitHub Account if not yet set up;
- Create a New Repository;
- Choose a Static Site Generator;
- Create and Write Content;
- Customise Your Blog;
- Test Locally and Push Changes;
- Enable GitHub Pages;
- Optional: Get your own domain name;
You can refer to the GitHub documentation Creating a GitHub Pages site with Jekyll. In this post, however, I will explain everything you need to know about this process, and much more.
Next, we will go through these steps in detail. Even though I have a static website, I will also reveal my secrets about getting user submissions effortlessly.
A GitHub Pages site
GitHub Pages allow us to create static websites hosted on GitHub. GitHub Pages uses the Jekyll engine to generate the website according to your configuration. Instead of writing your website in HTML, you can simply use Markdown language to structure your website pages. Markdown is so simple that you can start using it right away.
How to create websites on GitHub
We can create a website on GitHub by simply creating text files using the GitHub web interface. This is the most straightforward way. Alternatively, we can install the Jekyll engine locally, which is more work but good for testing your website before publishing.
Many of you want to start with the most complicated approach. I suggest you quickly skim the “the simplest way” section to know the basics if things like Markdown and GitHub are new. So it is your choice, and I will give you two options next, starting with the simplest way.
The simplest way
Set Up a GitHub Account
GitHub is a platform that provides version control, collaboration tools, and repository hosting for software development projects, making it easier for teams to work together and manage their code effectively.
However, if you are not a coder and do not have any experience with version control, you will start using GitHub in no time. It is very user-friendly and totally free.
I use Git to keep track of my changes, and I have a few blog posts about Git. Git also helps manage my blog posts, their versions, and decentralised storage so I can work from different computers.
If you don’t already have one, create a GitHub account at github.com.
Create a New Repository
A GitHub repository (often called “repo”) is where software projects are stored and managed on the GitHub platform. It is a central hub for a project’s source code, documentation, issues, and related resources.
Besides complicated programming projects, you can store text files and images on GitHub. That’s a perfect setup for creating a simple (or, if you want, very complicated and huge) blog.
You will have a few benefits from using GitHub for storing your blog posts:
- You will track changes made to your blog posts by you or any other contributors of your project;
- You will organise your blog structure as you please;
- You will get an excellent collaboration tool with other people if you like working in a team;
- GitHub will automatically create your website or blog using your desired structure and configuration
To create a new repository that can be used to publish your website/blog:
- Click on the ‘+’ icon in the top right corner of your GitHub profile and choose “New repository.”
- Name your repository (e.g., “username.github.io,” replacing “username” with your GitHub username).
- Initialise the repository with a README file, including the information about the project.
What is Jekyll?
Jekyll is a static site generator designed for building simple, static websites. It takes raw text files, often written in Markdown or Textile, and transforms them into a static website ready to be served. Jekyll is written in Ruby and is particularly popular among developers for its simplicity, ease of use, and seamless integration with GitHub Pages. Here are some key aspects of Jekyll:
-
Static Site Generator: Jekyll is a static site generator, which means it takes source content (usually written in Markdown or HTML) and templates, processes them and produces a set of static HTML pages. Unlike dynamic websites, static sites do not rely on server-side processing for each page request.
-
Markdown Support: Jekyll supports Markdown, a lightweight markup language that is easy to write and read. Users can write content in Markdown, and Jekyll will convert it into HTML during the site generation.
-
Liquid Templating Engine: Jekyll uses the Liquid Templating engine to allow for dynamic content within templates. This includes variables, filters, and control structures that make it easy to create reusable templates.
-
Front Matter: Each page or post in Jekyll can have a front matter and metadata stored at the beginning of the file. This metadata can include layout, title, and other custom variables.
-
Themes: Jekyll supports themes, which are pre-designed templates and styles that users can apply to their sites. This makes changing a site’s look and feel easy without manually modifying the underlying code.
-
GitHub Pages Integration: Jekyll is the default static site generator for GitHub Pages, a GitHub feature allowing users to host static websites directly from their GitHub repositories.
-
Customisation: Users can customise Jekyll’s behaviour and appearance by creating or modifying templates, stylesheets, and configuration files. This flexibility allows developers to tailor their sites to specific needs.
-
Fast and Secure: Static sites generated by Jekyll are generally fast to load because they consist of pre-rendered HTML pages. Additionally, static sites can be more secure than dynamic sites because there is no server-side code processing.
_config.yml file
You can use the GitHub web interface to create and manage a Jekyll-based website without installing Jekyll locally. GitHub Pages has built-in support for Jekyll, and it can automatically build and publish your site directly from the GitHub repository.
To begin, you will have to create a configuration file for Jekyll:
- In your new repository, click the “Add file” button and create a new file named
_config.yml. - Copy and paste a basic
_config.ymlinto this file. You can use the one provided in the previous response. - Click on “Commit new file” to save your changes.
Below is a basic _config.yml file for a Jekyll website intended to be hosted on GitHub Pages. This configuration provides some essential settings, but you can further customise it based on your specific requirements.
# _config.yml
# Site settings
title: Your Website Title
description: A brief description of your website
url: "https://your-username.github.io" # Update with your GitHub Pages URL
baseurl: "" # Should be empty for GitHub Pages, or the name of subfolder if the site is served in a subfolder
# GitHub Pages settings
repository: your-username/your-repo-name # Update with your GitHub repository
branch: main # Update with your repository's main branch
Please note the following:
- Update the
title,description,url,repository, and other fields with your specific information. - Ensure the
baseurlis empty when using GitHub Pages. - Choose a Jekyll theme that suits your preferences by replacing
minimawith the desired theme. - The
branchshould be set to the main branch of your GitHub repository.
After updating the _config.yml file, commit and push it to your GitHub repository. GitHub Pages will use this configuration when building your Jekyll site.
Edit your files online
Next, we will add content for this:
- Create new Markdown files (e.g.,
index.mdfor the homepage) directly on GitHub by clicking on the “Add file” button and selecting “Create new file.” - Write your content using Markdown syntax.
Markdown is a lightweight markup language that uses plain text formatting syntax to create rich text documents that can be easily converted to HTML. It is commonly used for formatting and structuring content on the web, providing a simple and human-readable way to create documents with headings, lists, links, and other elements.
I write my blog in Markdown, a simple text format that provides all I need for publishing. I can also add code snippets to my posts so easily. This is an example of Markdown syntax:
# My First Blog Post
Welcome to my blog! In this post, I'll share my thoughts on **Markdown** and its simplicity.
## What is Markdown?
Markdown is a lightweight markup language that allows you to easily format text. It's excellent for creating blog posts, documentation, and more.
### Why use Markdown?
- **Easy to Learn**: Markdown uses simple syntax.
- **Versatile**: It supports various elements like headers, lists, and links.
Commit Changes
In the context of version control systems like Git (which is used by GitHub), a “commit” refers to saving changes to a set of files or a repository. Each commit represents a snapshot of the project at a specific point in time, capturing the changes made since the last commit.
After creating or editing files, commit the changes by scrolling down to the bottom of the page, entering a commit message, and clicking the “Commit changes” button.
Enable GitHub Pages
GitHub Pages is a web hosting service provided by GitHub that allows users to publish static websites directly from their GitHub repositories. It leverages Git’s version control capabilities to automatically build and deploy HTML, CSS, and JavaScript files, making it easy for developers to showcase and share their projects online.
GitHub pages help me publish my blog when I push new posts or add alterations to existing posts. That’s the most fantastic tool I have ever used! That’s also relatively simple, and you can do it, too, even with zero programming experience :)
The most straightforward GitHub Pages workflow involves using a combination of Git, Markdown files, and Jekyll (a static site generator supported by GitHub Pages). Here’s a step-by-step guide to set up a simple workflow for publishing website posts when pushing to a GitHub repository:
Now, in the context of GitHub Pages:
GitHub Pages is a hosting service provided by GitHub that allows users to host static websites directly from their GitHub repositories. It supports Jekyll natively, so you can use Jekyll to build and publish your website on GitHub Pages without needing an external server.
How Jekyll is related to GitHub Pages:
-
Built-In Support: GitHub Pages has built-in support for Jekyll. If your GitHub repository contains a
gh-pagesbranch or adocsfolder with a Jekyll site, GitHub Pages will automatically build and publish it. -
Automatic Build: When you push changes to your repository, GitHub Pages will automatically rebuild your Jekyll site and update the published version.
-
Jekyll Themes: GitHub Pages offers Jekyll themes that you can apply to your repository to quickly customise the site’s appearance.
-
Custom Domains: GitHub Pages supports custom domains, allowing you to use your domain name for a Jekyll-powered site hosted on GitHub.
In summary, Jekyll and GitHub Pages provide a straightforward way to create, host, and maintain static websites. Jekyll simplifies building the site, while GitHub Pages handles the hosting and automatic deployment whenever changes are made to the associated repository.
To enable GitHub Pages:
- Go to the “Settings” tab of your repository.
- Scroll down to the “GitHub Pages” section.
- Under “Source,” select the branch where your Jekyll site is stored (usually
mainormaster). - Click “Save.”
Access Your Website
After a few moments, GitHub Pages will build your Jekyll site, and you can access it at https://your-username.github.io/your-repo-name. Replace your-username with your GitHub username and your-repo-name with the name of your GitHub repository.
Edit Content Online
You can continue to edit and add content directly on GitHub using the web interface. GitHub Pages will automatically rebuild your site when you commit changes.
Using the GitHub web interface is a convenient option for those who prefer not to install Jekyll locally or for quick updates to a Jekyll-based site. However, setting up Jekyll locally can provide a more efficient workflow for extensive customisation and development.
A bit complicated way
When you want to test your website locally, you can go for a bit more setup work explained in Testing your GitHub Pages site locally with Jekyll and further detailed below.
1. Install Jekyll Locally
Before you start, have Ruby and RubyGems installed on your computer. Then, install Jekyll using the following command:
gem install jekyll bundler
2. Create a New Jekyll Site
Create a new Jekyll site using the following command:
jekyll new your-website-name
Replace your-website-name with the desired name for your website.
3. Navigate to Your Jekyll Site
cd your-website-name
4. Test Locally
Run the Jekyll development server to test your site locally:
bundle exec jekyll serve
Visit http://127.0.0.1:4000/ in your web browser to view your site.
5. Customise Your Site
Explore the files and folders in your Jekyll site. Customise the _config.yml file for general site configuration.
You can get an example of the _config.yml file above.
6. Push to GitHub
Initialise a new Git repository, commit your changes, and push to GitHub:
git init
git add .
git commit -m "Initial commit"
git remote add origin your-github-repo-url
git push -u origin master
Replace your-github-repo-url with the URL of your GitHub repository.
7. Configure GitHub Pages
- Go to your GitHub repository on the GitHub website.
- Navigate to the “Settings” tab.
- Scroll down to the “GitHub Pages” section.
- Choose the branch (usually
master) and save.
8. Access Your Published Site
Once GitHub Pages has processed your site, you can access it at https://your-username.github.io/your-repo-name. Replace your-username with your GitHub username and your-repo-name with the name of your GitHub repository.
9. Keep Your Site Updated
Whenever you make changes to your Jekyll site, commit and push those changes to GitHub. GitHub Pages will automatically rebuild your site.
That’s it! You’ve now set up a basic website scaffold using Jekyll and GitHub Pages. Customise your site further by exploring Jekyll themes, layouts, and additional features based on your needs.
10. Create and Write Content
That’s the best part: wherein you start creating content for your blog.
Write blog posts in Markdown format within the designated directory of your repository. Utilise the features provided by your chosen static site generator to organise and categorise your content.
11. Customise Your Website
You can easily customise the look and feel of your website or blog by modifying the template files, stylesheets, and configuration settings.
Add personal touches to make your website unique and reflective of your style.
12. Test Locally and Push Changes
Test your website locally to ensure everything looks and functions as intended. Use the development server provided by your static site generator. Once satisfied, commit your changes and push them to your GitHub repository.
13. Enable GitHub Pages
To enable GitHub Pages:
- Go to your repository’s Settings on GitHub.
- Scroll down to the “GitHub Pages” section.
- Choose the branch where your blog is stored (typically “main” or “master”).
- Click “Save” to enable GitHub Pages for your repository.
- Your blog should now be accessible at
https://username.github.io(replace “username” with your GitHub username).
Remember to continuously update your blog with fresh content, engage with your audience, and promote your posts to increase visibility and create a successful blogging experience.
Bonus material
Since I have been using GitHub Pages for a while, and many people have asked me interesting questions about this process, I have decided to share several things to close this topic.
IDE
Indeed, you can use any text editor or IDE to work on your blog content, add new files, edit them, save, search, and so on.
IDE stands for Integrated Development Environment. It is a software application that provides comprehensive tools and features to programmers for software development. An IDE typically includes a code editor, a debugger, a compiler or interpreter, and often features for version control, build automation, and other development-related tasks.
PyCharm: PyCharm is an Integrated Development Environment designed for Python development. It is developed by JetBrains and provides a rich set of features, including Git support amongst other features. Essentially, PyCharm is a feature-rich IDE specifically tailored for Python development, so I have it installed.
You can also use PyCharm to edit Markdown files. PyCharm supports Markdown, offering features like syntax highlighting, code folding, and a live preview of Markdown files.
If you’re specifically looking for editors that integrate seamlessly with GitHub, here are some alternatives:
- Visual Studio Code (VSCode):
- Integration: VSCode has excellent integration with GitHub. Extensions like “GitHub Pull Requests” and “GitHub Repositories” allow you to work with repositories, review pull requests, and manage issues directly from the editor.
- Markdown Support: VSCode has robust Markdown support with features like live preview, syntax highlighting, and extensions for additional functionality.
- Atom:
- Integration: Atom, developed by GitHub, naturally integrates with GitHub repositories. The “GitHub” package enhances the integration and provides a seamless experience for managing repositories.
- Markdown Support: Atom has built-in support for Markdown with a live preview option and various Markdown-related packages.
- Sublime Text:
- Integration: Sublime Text has packages like “Sublime Merge Integration” that enhance Git integration. While less feature-rich than VSCode in this aspect, it provides a solid editing experience.
- Markdown Support: Sublime Text supports Markdown with syntax highlighting and various Markdown-related packages.
- Typora:
- Integration: Typora is a Markdown editor focusing on simplicity. While it may not have the direct GitHub integration of full-fledged IDEs, you can use it with Git command-line tools or other Git GUIs.
- Markdown Support: Typora offers a clean and distraction-free Markdown editing environment with live preview.
When choosing an editor, consider your workflow and preferences. If GitHub integration is a critical factor, editors like PyCharm, Visual Studio Code or Atom might be particularly appealing due to their strong GitHub integration and active community support.
Jekyll patterns
If you don’t have a Jekyll site yet, you can create one using the following commands:
jekyll new .
This will generate a basic Jekyll site with the default structure.
Edit the _config.yml file and customise the settings to fit your needs. You can modify the default layout, styles, and other files in the _layouts and _includes directories.
Create your blog posts in the _posts directory. Blog post files should be named in the format YYYY-MM-DD-title.md. Use Markdown for formatting your content.
Run your Jekyll site locally to preview changes:
jekyll serve
Visit http://localhost:4000 in your browser to view your site.
Here are five commonly used Jekyll patterns:
- Layouts:
- Pattern:
_layoutsdirectory - Description: Layouts in Jekyll define the structure of pages. Common elements like headers, footers, and navigation menus can be abstracted into layouts, making it easy to maintain consistency across the site. Different pages (e.g., default, post, page) can use specific layouts.
_layouts/ ├── default.html ├── post.html └── page.html - Pattern:
- Includes:
- Pattern:
_includesdirectory - Description: Reusable code snippets can be stored in the
_includesdirectory. This is useful for elements like navigation bars, sidebars, or any content that appears on multiple pages. Includes can be inserted into layouts or pages using Liquid tags.
_includes/ ├── header.html ├── footer.html └── navigation.html - Pattern:
- Data Files:
- Pattern:
_datadirectory - Description: Jekyll allows storing structured data using data files (YAML, JSON, or CSV). This is particularly useful for creating dynamic content, such as lists of team members, product details, or configuration settings.
_data/ ├── team.yml └── settings.json - Pattern:
- Collections:
- Pattern:
_collectionsconfiguration in_config.yml - Description: Collections allow you to group related content together. For example, you might create a collection for a portfolio with individual projects. Collections provide a convenient way to organise and iterate over related pieces of content.
collections: portfolio: output: true permalink: /portfolio/:title/ - Pattern:
- Permalinks:
- Pattern:
permalinkconfiguration in front matter or_config.yml - Description: Permalinks define the structure of URLs for your pages or posts. By default, Jekyll generates URLs based on the folder and file structure. Customising permalinks allows you to create SEO-friendly and user-readable URLs.
# In front matter permalink: /blog/:year/:month/:day/:title/ # Or in _config.yml permalink: /:categories/:title/ - Pattern:
These patterns provide a foundation for organising, structuring, and customising content in a Jekyll-based project.
GitHub Repository
Make sure to name GitHub Repository in the format <username>.github.io if you want it to be your GitHub Pages site.
To clone the repository to your local machine using Git:
git clone https://github.com/username/username.github.io.git
cd username.github.io
Please note that you might need to set your personal access token, as explained in my post The Token Way to GitHub Security.
Add, commit, and push your changes to GitHub as follows:
git add .
git commit -m "Add new blog post"
git push origin master
Automate the Process (Optional)
For a more automated process, you can explore GitHub Actions to build and deploy your site automatically whenever you push changes to the repository. Create a .github/workflows/gh-pages.yml file with the necessary workflow configuration.
This basic workflow should provide a simple way to publish website posts on GitHub Pages. Review and follow GitHub Pages and Jekyll documentation for more advanced features and customisation options.
Certainly! Below is a basic example of a GitHub Actions workflow configuration file (gh-pages.yml) for deploying a Jekyll site to GitHub Pages:
name: Deploy to GitHub Pages
on:
push:
branches:
- main # Change this to your main branch
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Setup Ruby
uses: actions/setup-ruby@v2
with:
ruby-version: 2.x # Change this to your desired Ruby version
- name: Install dependencies
run: |
gem install bundler
bundle install
- name: Build Jekyll site
run: bundle exec jekyll build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: $
publish_dir: _site
This workflow does the following:
-
Checkout Repository: Checks out the repository on the latest commit.
-
Setup Ruby: Sets up Ruby using the specified version.
-
Install dependencies: Installs Bundler and project dependencies.
-
Build Jekyll site: Executes the Jekyll build command.
-
Deploy to GitHub Pages: Uses the
peaceiris/actions-gh-pagesaction to deploy the_sitedirectory (Jekyll’s default output directory) to thegh-pagesbranch, which is the branch GitHub Pages uses to serve your site.
Make sure to replace placeholders such as main with your actual main branch name and adjust the Ruby version according to your project’s requirements.
Remember to customise the workflow based on your specific needs and project structure. Additionally, consider adjusting the configuration if you use a different static site generator or have particular build requirements.
Own Domain
An “own domain” refers to a custom domain name purchased from a domain registrar, such as Namecheap, GoDaddy, or Google Domains. It allows you to have a unique and branded web address (e.g., www.yourname.com) for your website instead of using the default GitHub Pages domain.
Here’s how to link your own domain to a GitHub Pages website (read more in Managing a custom domain for your GitHub Pages site):
- Purchase a Domain:
- Choose and purchase a domain name from a domain registrar of your choice. Remember or note the registrar’s DNS settings, as you’ll need them later.
- Configure DNS Settings:
- Log in to your domain registrar’s website.
- Navigate to the DNS settings or DNS management section.
- Add a new “A” (Address) record with the following configuration:
- Type: A
- Name: @ (or your domain without www)
- Value: 185.199.108.153
- Add three more A records with the IP addresses 185.199.109.153, 185.199.110.153, and 185.199.111.153.
- Create a CNAME Record (Optional):
- If you want to use the “www” subdomain, add a CNAME record:
- Type: CNAME
- Name: www
- Value: yourusername.github.io (replace “yourusername” with your GitHub username).
- If you want to use the “www” subdomain, add a CNAME record:
- Configure GitHub Pages:
- Go to your GitHub repository.
- Navigate to the “Settings” tab.
- Scroll down to the “GitHub Pages” section.
- In the “Custom domain” field, enter your domain name (e.g., www.yourname.com).
- Save the changes.
- Enforce HTTPS (Optional but Recommended):
- In the GitHub Pages settings, enable the “Enforce HTTPS” option. This ensures secure communication between your domain and GitHub Pages.
- Wait for DNS Propagation:
- DNS changes may take some time to propagate. It could range from a few minutes to 48 hours.
- Verify Your Domain:
- After DNS propagation, visit your custom domain in a web browser to verify that it correctly displays your GitHub Pages website.
That’s it! Your GitHub Pages website should now be accessible through your custom domain.
Remember, DNS changes and HTTPS enforcement might take some time globally. Double-check your DNS settings and GitHub Pages configuration if you encounter any issues.
Facing some issues? Read more about using custom domain in Troubleshooting custom domains and GitHub Pages.
HTML templates and styling
HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It structures content on the web by using a system of elements represented by tags. Each tag defines a different part of the content, such as headings, paragraphs, images, links, and more.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a sample paragraph.</p>
<img src="image.jpg" alt="An example image">
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
In this example, <html>, <head>, and <body> are structural elements. The <h1> tag represents a top-level heading, <p> is a paragraph, <img> embeds an image, and <a> creates a hyperlink.
CSS (Cascading Style Sheets): CSS is a style sheet language used for describing the presentation of a document written in HTML. It enables the separation of content and presentation, allowing developers to style HTML elements with various properties like colour, size, layout, and more.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #007bff;
}
p {
font-size: 16px;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
In this CSS example, the body selector sets the font and background colour, h1 changes the colour of the heading, p adjusts the font size and line height of paragraphs, and img ensures images are responsive and don’t exceed their container width. The CSS file is linked to the HTML document to apply these styles.
I have written a bit about CSS styles and HTML layouts in my post AI-free Website Design wherein I also share some helpful chatGPT prompts to create your HTML design and layouts and some other beginner-friendly tips for creating websites.
HTML Web Form submissions
In a broader sense, “web forms” can simply refer to HTML forms used on websites. HTML forms are a crucial part of web development and allow users to input data that can be sent to a server for processing. They include input elements such as text fields, checkboxes, radio, and submit buttons. When a user fills out a web form and submits it, the data is typically sent to a server for further processing, such as storing it in a database or triggering some server-side logic.
Unlike dynamic content management systems (CMS) that generate web pages dynamically upon each request, Jekyll pre-generates the entire website as static HTML files. A web server can then serve these HTML files without needing server-side processing or a database.
Since the Jekyll engine creates a static website, I must use a third-party solution for web form submissions. I like UseBasin.com for its simplicity of integrating dynamic web forms into HTML pages.
With UseBasin.com , you receive your form submission data directly to your e-mail box, create auto-replies, integrate with hundreds of other applications with the help of Zapier, store your data in Google Sheets, forward submissions to a Slack and so many other things to keep you happy.
In UseBasin.com , you can create your own HTML form using the provided key or build your forms with the drag-and-drop components without any coding necessary.
Personally, I customise the HTML form provided in their simple setup instructions, such as the following HTML contact form:
<form action="https://usebasin.com/f/my_form_id" method="POST">
<label for="email"> Email: </label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
AI-generated art
You can use tools such as Midjourney to add unique and breathtaking images. Read my blog posts for more details about Midjourney and similar tools such as Jasper/Stable Diffusion/Dalle:
- Mastering Midjourney Prompts for Stunning Images
- From Dutch Golden Age to AI Art: A Journey with Vermeer and AI
Getting an organic traffic
To generate organic traffic for your website, you’ll focus on strategies that enhance your site’s visibility in search engine results and provide value to your target audience. Here’s an approach to help you get organic traffic:
- Keyword Research:
- Identify relevant keywords related to your content and industry using tools like Google Keyword Planner, SEMrush, or Ahrefs. Choose keywords that have a good balance of search volume and competition.
- On-Page SEO Optimisation:
- Optimise your website’s pages for search engines. This includes using target keywords in title tags, meta descriptions, headers, and throughout your content.
- Quality Content Creation:
- Create high-quality, informative, and engaging content that addresses the needs and interests of your target audience. Regularly publish fresh content to keep your site active and relevant.
- Content Promotion:
- Share your content across social media platforms to increase its visibility.
- Link Building:
- Build high-quality backlinks from reputable websites in your industry. Focus on natural link-building methods such as guest posting, reaching out to influencers, and creating shareable content that others may link to.
- Optimise for Mobile:
- Ensure your website is mobile-friendly. Google prefers mobile-friendly websites in search results, and an increasing number of users access the internet via mobile devices.
- Page Load Speed:
- Optimise your site’s speed. Fast-loading pages enhance user experience and contribute to better search engine rankings. Use tools like Google PageSpeed Insights to identify and address speed issues.
- User Experience (UX):
- Improve the overall user experience of your website. This includes clear navigation, easy-to-read content, and an intuitive design. A positive user experience can lead to higher engagement and return visits.
- Regularly Update Content:
- Keep your existing content up-to-date. Search engines prefer fresh content, so revisiting and updating older articles or pages can improve search rankings.
- Monitor Analytics:
- Use analytics tools like Google Analytics to track the performance of your website. Analyse user behaviour, identify popular content and make data-driven decisions to enhance your site’s performance.
Remember that building organic traffic takes time, and consistency is vital. By implementing these strategies and staying committed to producing valuable content, you can steadily increase your site’s visibility and attract a larger audience.
Getting organic traffic is a challenging operation. You must learn how to do SEO, check your website performance and consider social sharing.
SEO optimisation
SEO optimisation, or search engine optimisation, improves a website’s visibility and ranking on search engine results pages (SERPs). It involves various techniques and strategies to make a website more attractive to search engines, ultimately driving organic (non-paid) traffic to the site.
You can find about SEO optimisation and setting up Google Analytics in my following posts:
When building a website with GitHub Pages, you can add keywords and page descriptions in the HTML layout into the HTML’s HEAD section. This will help search engines index your website pages and attract organic traffic.
Keeping your website updated with good-quality SEO-optimised content is quite time-consuming. I have yet to do much link-building and social networking. I just focus on content first currently. However, you can always backlink to my blog if you would like to share your favourite posts.
No code
Even though Jekyll helps minimise coding needs, to build a complex website, you will still have to add some JavaScript and HTML/CSS code to make your website look good.
Check out the no-code tools I have added in this section for folks who want to avoid the computer code hustle.
AI tools for creating websites
You can try Mixo.io to automatically create your website, social sharing buttons and visuals.
Mixo.io is an AI-powered website builder that simplifies web development using advanced machine learning algorithms to generate websites using text prompts. Mixo.io offers a range of features and tools that make it easy to create a professional-looking SEO-optimised website quickly and without coding using a prompt text.
Mixo.io also enables on-page SEO optimisation. On-page optimisation involves optimising website elements, such as page titles, meta descriptions, headings, URL structures, and content relevancy. It also ensures a website has a mobile-friendly design, fast loading speed, and a good user experience.
You can read more about Mixo.io in my blog post Creating Websites with AI on Mixo.io.
Another AI website generator is 10web.io , with which you can create your website with AI-generated content and images effortlessly, recreate any website or customize/add your content and images.
Blogging platforms
If you think it is too much work, and you like to have ready blogging solutions, you can check out these free platforms.
Blogger (Blogspot)
Blogger is Owned by Google and is a user-friendly platform that allows you to create a blog with a custom domain for free. It offers easy integration with other Google services and provides various customisation options.
Medium
Medium platform focuses on providing a simple and clean writing experience. It’s a social platform, so your posts can reach a wider audience, and the design is minimalistic, allowing you to focus on content creation without dealing with complex settings.
When you publish a post on Medium, the copyright for your content typically remains with you, the original author. However, you grant Medium a license to use, display, and distribute the content on their platform and through their services. This license is often outlined in the terms of service or user agreement you agree to when creating an account and publishing content on Medium.
It’s essential to review Medium’s terms of service or licensing agreements to understand how your content may be used on the platform. Terms of service can be updated, so periodically checking for changes is a good practice.
If you have specific concerns about the ownership and use of your content, consider consulting legal advice or contacting Medium’s support for clarification on their policies.
Remember that platform policies may evolve, and it’s always a good idea to stay informed about the terms governing the use of your content on any platform where you publish.
Wix
Wix is a website builder that offers a free plan, including a blog feature. It provides a drag-and-drop interface, making creating and customising your blog easy. Wix also offers a variety of templates and additional features for those who want more advanced options.
While these alternatives offer free plans, remember that they may have limitations compared to paid options. The best platform for you depends on your specific needs, preferences, and the level of control you want over your blog.
WordPress
WordPress is a popular open-source content management system (CMS) allowing users to create and manage websites easily. It provides a user-friendly interface for content creation and editing, making it accessible for beginners and experienced developers. With a vast library of plugins and themes, WordPress enables customisation to meet various website needs, from blogs to e-commerce sites. Its robust community and extensive documentation contribute to widespread adoption and continuous improvement.
Conclusion
In this post, we have a simple solution for creating a website/blog using GitHub Pages, Jekyll and tidbits of HTML/CSS (and JavaScript) when needed. We also have several no-code alternatives that are available today. Please let me know if you have any questions.
Did you like this post? Please let me know if you have any comments or suggestions.
Posts about building websites and SEO that might be interesting for youReferences
1. Creating a GitHub Pages site with Jekyll
2. Testing your GitHub Pages site locally with Jekyll
3. The Token Way to GitHub Security
4. Troubleshooting custom domains and GitHub Pages
|
About Elena Elena, a PhD in Computer Science, simplifies AI concepts and helps you use machine learning.
|