This is Anusha

I create responsive websites.

Blog

How I Make My Portfolio Website without Design Skills

 

In this post, I’m going to share how I remake my website from scratch and deploy it on GitHub Pages.

 

I bought Squarespace long before I started learning how to code, and it was used for other purposes. Although there are so many templates you can choose to make the website you want, it’s pity that I didn’t fully take advantage of that. I just used the basic layout and added some colors. I didn’t screenshot my old website so I cannot show you how plain it was. It was plain and I just tried to make it to serve the purpose.

After learning how to code, I’m not satisfied with my old website. Although the idea of dragging and pasting the elements seems easy to make the layout, it is not as free as you thought compared to hand coding. So, when my Squarespace expired in early October 2019, I decided to write the code from scratch.

What if I don’t have design skills?

If you have web design skills, it’s great because you have more to showcase. But not having design skills doesn’t mean you cannot do it, either. I am not good at designing, but I found a solution to solve it.

There are so many free or paid website templates online. Just Google and skim through them and pick up those that attract you the most. Or you can always find inspirations on Awwwards and its Collections section. Try to make it simple.

So, the following is my steps to set up my portfolio website.

1. Find the template and layout

I came across a template website called HTML5up, and you can download tons of beautiful templates with HTML, CSS, and JavaScript code. All you have to do is to customize the code to suit your needs. I realize that there are so many template websites like this: some are free and some are paid. Not a designer myself, those templates do help me a lot to overcome my lack of confidence in design. I found the template I like and, of course, I will write the code from scratch without using their code. HTML5up hopes users to give them the credit. So, please remember their requests when you use them for free.

HTML5UP

2. Define those sections you want to put on your website

Basically, there are main sections you need to put on your portfolio website: tell people who you are, what you can do, what you have done (for example, projects), etc. If you need a more specific guide, you can check out Laurence Bradford’s Learn To Code With Me. She has a series of free courses to help you go through the steps.

Portfolio course

I am always intimidated to work on my portfolio website, mainly because I always think I don’t have many projects or skills to demonstrate. But I have to take the first step. If you are like me, don’t worry about it. Just do it. I don’t have many projects to showcase, but I’m building a website called Taiwan Hikes to promote hiking in Taiwan, and I plan to make it live. It has many features and I share my GitHub source code on my website.

When you decided the sections, you can start writing the content and choosing the images you are going to use. I have many beautiful photos, and I don’t need to use the stock images. You probably don’t need too many of them, either. I do use icons from Font Awesome and Flaticon. I didn’t write much content, but the good things about making your website from scratch is you can always come back later to fix something.

GitHub Pages

3. Write the code? Not so fast. Do the planning first.

Now we have the layout, the sections/structure, and the content. Let’s create the code. Wait, perhaps not so fast. One of the things I learned from a mentor is you have to do the planning first. I didn’t do it properly when I started my hiking website project and I got the setback. I kept adding new ideas and features on my project, and it took so long to finish a small section. So, break up your portfolio project into small sections (you can think of them as smaller projects) and use GitHub Projects or Trello to monitor your progress. Once you’ve done that, feel free to start writing the code. I have to admit that I still have to remind myself of this process. I think this is one of the reasons why the code of my Taiwan Hikes became so messy.

4. Deploy on GitHub Pages if yours is a static website

I’m sure you have a GitHub account and put your source code there. If you do, that is great, because there is no hassle to deploy your source code on GitHub Pages and it’s free. GigHub Pages is hosted directly from your repo and you can see it live once you finish the setup. For more details, please check out GitHub Pages. You can also use Jekyll to do the blogging.

A few things to remember is to set up the correct repo name. Go to Settings and change your repository name into .github.io. Scroll down Settings and you will see GitHub Pages saying your site is published at URL https://yourusername.github.io.

GitHub Pages

One of the mistakes I made was I didn’t put my index.html and style sheet on the root folder. It took me some time to realize that. Whenever you commit and push your code, you can see your website live from the URL.

5.Custom your domain

One of the great things about GitHub Pages is you can use your own domain. If you don’t have one, just buy one and use it right away. But if you are like me, transferring your domain, please remember to set up some required procedures in advance, like agreeing to transfer, changing DNS setting etc., because some of the changes take up to 24 hours more or less to go through. Please prepare those things in advance so there will be no interruption of your website. I bought my domain from Namecheap and they have instructions to teach you how to set up GitHub Pages

Once you finish those process, go back to the settings on your repo to GitHub Pages section. Remember to type in your correct domain name and check the box of Enforce HTTPS. If there is no surprise, your portfolio is live. Here is a YouTube video about how to set up custom domain. There are so many things GitHub Pages can do for your website. If you are interested, you can explore GitHub Pages for more details.

This is how I remake my website. It seems easy, but still takes me some time to finish it. Of course, things just don’t stop here. I still have to fix things, add blog posts, and add new features on my website.