Website for the programmer [on Node.js]. Simply. Stylish. Is free

Most programmers need a website or even their own web page. Why are there programmers, almost all ordinary people already have their own site, even if in the form of a Vkontakte account.

I am not satisfied with the Vkontakte account, and even on Facebook as my site. Too much superfluous, imposed format and other inconveniences.

If I were not a web developer, I would have to cry and nibble on a cactus. Fortunately, I am him, so I decided to make myself a website myself. To post on it articles like this, small hobby projects, and to have something to indicate in the "site" of the profile on Habré.
')
If you, too, would like to have a site that is in complete control, on which everything is exactly the way you want it, but still your hands did not reach to figure it out and do it, then this article is for you.

Some knowledge of HTML and JS will be useful to you. Experience with Node.js is optional.


I recommend to immediately perform the actions described in the article, and then after reading it you will have a ready site like this .

So let's get started.

Create a githaba repository

What does a programmer who wants to start a new project do first? Creates a repository in one of the version control systems. We will use github because:

• This is the most convenient and functional version control service.
• Creating a new project will take only a couple of minutes, even if you are not registered yet.
• It is free.

Register on GitHub if you don't have an account there yet.

Configure Git in the system. Github has a good manual for each system: https://help.github.com/articles/set-up-git .

Go to the repository created by me with the site ( http://github.com/daeq/programmer-site ) and click the "Fork" button in the upper left corner.



Your copy of the code has become available at http://github.com/<Your name> / programmer-site. If you don't like the name, you can rename it in the "Admin" section.

Now we have a repository, and it even has a prototype of the future site. Go ahead.

Create an application on Heroku

Now that we have a code and a place to store it, we need to choose a hosting. I decided to use an application service, namely Heroku , because:

• Hosting setup is as simple as possible. Just a couple of commands in the console - and you have a stable working site. In the future, the calculations of the site occur in one team.
• Under the application server, the usual Ubuntu, so if you need something besides the http-server, it will be easy to use.
• It is free (for our needs).

Register on heroku.com if not yet.

After registration, you will see this prompt:


You need to do what is written on it: download and install toolbelt, then execute "heroku login" in the console.

Fill the site on Heroku

Hosting is - it's time to put the site on it.

Open the console, go to the directory on the disk where you will have the code, and type in the console:

  git clone git@github.com: <your login on github> / programmer-site
 cd programmer site
 heroku apps: create <name of your application> 

The name must be unique among all heroku applications. You can use, for example, the address of your future site.

In response, you will see something like this:

  Enter your Heroku credentials.
 Email: bratchenko@gmail.com
 Password (typing will be hidden): 
 Authentication successful.
 Creating programmer-site ... done, stack is cedar
 http://programmer-site.herokuapp.com/ |  git@heroku.com: programmer-site.git
 Git remote heroku added 

Heroku supports the layout of the site by simply pushing it into its git repository. We type in the console:

  git push heroku master 

If no errors occurred, then you did everything correctly and your website is available at <name of your application> .herokuapp.com (for example, http://programmer-site.herokuapp.com/ ).

Set up your domain

It is unlikely that the address on herokuapp.com fits your personal site. We will bind your own domain.

If you do not have your own domain, you can register it for free, for example, in the .tk zone.

Go to http://dot.tk

Enter the name of your future domain



In the ip input field we indicate one of the ip provided by heroku . For example, 75.101.145.87 .



Is done



We go to the application settings on heroku , go to the created application, the "Settings" section, enter your future domain in the "Domains" field, click "Add". Is done.



Your site should be available on the registered domain within half an hour.

Create the look of the site

Despite the fact that the site template in my example is incomparable and ingenious, you hardly want to leave it. Therefore, the next is the most difficult, but also the most pleasant part: to give the site the look that you like.

For the frontend of the site, I recommend using Twitter Bootstrap , because:

• This is a very simple, stylish looking front-end framework.
• Best of its kind by features: by the number of elements, standard and additional widgets.
• A lot of people use it and develop it. If you need some kind of modification or a non-standard element, most likely someone has already done it.

If you do not want to contact the designer with every minor refinement of the site - use Twitter Bootstrap.

There are three ways to make a suitable design for you:

• Ask the designer to create a site layout using Twitter Bootstrap elements in PSD format , and then roll it out of ready-made elements (or, again, ask someone to do it).
• Buy a ready-made theme, for example, here: https://wrapbootstrap.com/
• Make a design yourself from the available elements.

For the third point you may find the following links helpful:

• http://twitter.github.com/bootstrap/ - Twitter Bootstrap. It’s better to start learning the framework.
• http://bootswatch.com/ - free themes for Twitter Bootstrap. If you do not like the standard look of the elements, select another one by simply replacing the css file.
• http://stylebootstrap.info/ - color Bootstrap to your taste
• http://www.google.com/webfonts - a set of free fonts from Google. Do not like the standard font - choose another
• http://google.com/search?q=Twitter+Bootstrap is a good collection of Twitter Bootstrap links. Surely you will find something interesting.

In my example, the entire layout is in the tpl folder, and css, js and other files are in the public folder.

Saving and displaying changes

After you have made the necessary changes to the site, you should save them and put the new version on the hosting.

In the root directory of the site in the console run:

  git commit -a -m "description of the changes"
 git push heroku master
 git push origin master

It may seem redundant to type 3 commands each time to save changes to the repository and put them on the site. This procedure can be automated and simplified, but I already wrote a lot of text. Thinking it out for yourself.

If this article turns out to be quite interesting (pick up at least a couple of dozen pluses), it will be continued.

In the second part, I plan to describe how to create on the created site a simple, but flexible and functional blog of a programmer with a repository on the same github, using markdown, comments, sharing on social networks and a couple more vital features :)

Write in the comments, what features would you like to see on your site that are not available or do not work well in ready-made engines?