DEV Community

Cover image for Create your personal website and host on the github page with travis
Walter Nascimento
Walter Nascimento

Posted on

Create your personal website and host on the github page with travis

[Clique aqui para ler em português]

Creating repository

To have your website hosted for free on the github page, just go to your github account and create a repository with your username, in my case I created one like this:

walternascimentobarroso.github.io
Enter fullscreen mode Exit fullscreen mode

after creating any page that html you send will already work and you will have a website with the url like this:

http://walternascimentobarroso.github.io/

Template

There are several free personal page templates on the internet, for this post I will use this one:

https://startbootstrap.com/template/resume

Creating personal website

After creating your repository, clone the project:

git clone https://github.com/<username>/<username>.github.io.git
Enter fullscreen mode Exit fullscreen mode

It is best to avoid creating codes directly on the master, if you know git flow follow your flow, if you don’t know for the post not to get too big we will just use a separate branch.

git checkout -b development
Enter fullscreen mode Exit fullscreen mode

Then go to the website and download the template, extract the content and add it to your repository.

open the index file and edit the information as you wish, if you master css you can adjust the template as you wish (remembering that this project uses the bootstrap, then if you master the bootstrap you can change the classes to be more in your style)

after the changes made just send the information to the server

git push — set-upstream origin development
Enter fullscreen mode Exit fullscreen mode

Remembering that for the url (http://walternascimentobarroso.github.io/) to work the content has to be in the main branch, as in our case we created a branch for development, so we will use a CI tool to do the merge

Travis

Travis is a continuous integration tool for open source projects.

Getting access

Get a Github access token so that Travis can send it back to his repository:

Go to https://github.com/settings/tokens/new and create a new token

alt text

Now follow the steps:

alt text

  • Click on settings and go to Environment Variables

Let’s create a variable called GH_TOKEN

GH_TOKEN = // paste the copied token here

Sending to travis

In your project create a file with the name .travis.yml and enter the settings.

with that when committing travis read the .travis.yml file

finally create a file called package.json you don’t need to have anything in it just one {} is enough, as travis searches for dependencies within this file

after all the configurations and changes are completed just send to the server and wait

git push
Enter fullscreen mode Exit fullscreen mode

To make the project cooler, create a readme.md file and place

[![Build Status](https://travis-ci.org/<username>/<username>.github.io.svg?branch=master)](https://travis-ci.org/<username>/<username>.github.io)
Enter fullscreen mode Exit fullscreen mode

changing for your user.


Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊See you! 😊😊

Top comments (0)