# Let's Build and Deploy a Static Blog with HTML, CSS, Bootstrap, and GitHub Pages # Let's Build and Deploy a Static Blog with HTML and CSS ![static_blog.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1588429403890/6Iq53nhm9.gif) In today's tutorial, I will guide you on how to create a responsive static blog site with HTML, CSS, and Boostrap ## Who's this tutorial for? **Anyone learning HTML, CSS, and Bootstrap** This tutorial is for beginners, learning HTML, CSS, and Bootstrap and trying to build simple stuff. ## Prerequisite? - A working system with access to the internet - Any browser (I 💓 [Brave](https://brave.com), but chrome is popular) - Any text editor (I 💓 [VSCode](https://code.visualstudio.com)) - Basic knowledge of HTML, CSS, Git, and Bootstrap - [Git](https://git-scm.com) installed on your system - A [GitHub](https://github.com) account ## Time to Code I love the terminal, so I will be using it a lot throughout this tutorial, feel free to use what works for you. ### Open your terminal - If you're on the Linux system, `CTRL+ALT+T` will do the magic, or simply press the `super button` (Windows button, on PCs), and type `Terminal`. - If you're on Mac, the above command should work as well - For window users, simply press `WIN+R` (`windows button` and the key `R`) and type `cmd` and hit enter. - Inside the terminal enter the following commands: ```bash cd Desktop && mkdir static_blog && code static_blog ``` **The above command will change directory to the Desktop, creates a directory called static_blog and open it in visual studio code 😉** ### Don't mind using the terminal? If you don't mind, simply create a folder on your `Desktop` named `static_blog`, right-click it, and open with your favorite text editor. ### Creating the necessary folders and files Open your `terminal` (VScode inbuilt terminal) or any terminal pointing to the `static_blog` directory and enter the following commands: ```bash touch index.html && mkdir public && mkdir public/img && mkdir public/css && touch public/css/style.css ``` This will create the basic folder and files we need Or go ahead and create some folders and files using the structure below: static_blog - public - css - style.css - img - index.html Inside the image folder, I have included two images, one an image of me, and the other a sample image of someone writing. ### Structuring your HTML Inside your `index.html` type the following codes: `I advise you type this yourself`, don't just copy and paste it. Typing the codes yourself helps you understand how it works. And also allows you to edit it and add your own personalized details. ```html My Blog
Author image

Vincent Iroleh

Hello! 👋
I'm a Software Developer based in Aba, Nigeria
I'm passionate about making the web accessible to everyone.

``` In the above code, we're using bootstrap 4 and font awesome (CDN) as you observe its linked in the `head tag`. You will need an internet connection for the CDN links to work. ### Styling part of our HTML with CSS Inside your `style.css` type the following codes: `I advise you type this yourself`, don't just copy and paste it. Typing the codes yourself helps you understand how it works. And also allows you to edit it and add your own personalized details. ```css html { border: 5px solid green; } .bg-theme { background: #0d2538; color: #ffffff; } main { margin: auto; width: 50%; padding: 10px; } #card { background-color: #0f2d44; color: #ffffff; } article { transition: transform 0.2s; /* Animation */ } article:hover { transform: scale(0.9); } .author__img { vertical-align: middle; width: 100px; height: auto; border-radius: 50%; } .author__img:hover { webkit-filter: grayscale(100%); filter: grayscale(100%); } ``` My intention in this article is not to teach you HTML, CSS, or Bootstrap, but for you to create something with the knowledge you have already. ### Deploying to Github - Github Pages [Github Pages](https://pages.github.com) allows you to host static websites directly from your GitHub repository. Just edit, push, and your changes are live. **Create a Repository** - Go to [github.com](https://github.com/) and create a new repo called `static_blog` - Go back to your code editor and execute the following commands to initialize git, add, commit changes, add remote origin, and push to the remote repo. - `git init` to initialize git - `git add .` to add every change - `git commit -m "first commit"` to commit every change - `git remote add origin https://github.com/vincentiroleh/static_blog.git` to establish a connection between the remote repo, replace the `repo link` with yours - `git push -u origin master` to push to the remote repo ### Let's go Live - After a successful push to GitHub, refresh your repo's tap and click on settings ![vincentiroleh_static_blog_A_tutorial_on_how_to_build_a_static_blog_layout_with_HTML_CSS_and_Bootstrap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1588427814696/g_d2qWnQU.png) - Scroll down to GitHub Pages ![Options.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1588427911229/e8oCKiF0a.png) - Click on the `button` under source highlighted `none` and select `master branch` ![Options (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1588428066324/W6jc5eau9.png) ### Bravo!! Our page is now live, the page will refresh by itself, scroll down to GitHub Pages you will see the link to your page. ![Options (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1588428351183/dMj1L8n9P.png) ### GitHub Repo Feel free to compare what you have done with mine [HERE](https://github.com/vincentiroleh/static_blog) ### Bonus Download a PDF version of this tutorial [HERE](https://bit.ly/3bSmkFz)