November 21, 2012 at 16:06

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

  • Tutorial

Most programmers need a website or at least their own web page. What is it for programmers, almost all ordinary people already have their own website, even if in the form of a Vkontakte account.

I have a VKontakte account, and even on Facebook as my site does not suit. 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 one of them, so I decided to make a website for myself. To post articles like this on it, small hobby projects, and to have something to indicate in the "site" field of the profile on Habré.

If you also would like to have a website that you have full control over, on which everything is exactly the way you want, but still your hands didn’t reach to figure it out and do it, then this article is for you.

Some knowledge of HTML and JS will come in handy. Experience with Node.js is optional.


I recommend that you immediately follow the steps described in the article, and then after reading it you will already have a ready site like this .

So let's get started.

Create a repository in github


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

  • This is the most convenient and functional service for version control.
  • 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.

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

We go into the repository I created with the site ( http://github.com/daeq/programmer-site ) and click the "Fork" button in the upper left corner.

Fork

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 already has a prototype of a future site. Move on.

Create an application on Heroku


Now that we have the code and a place to store it, we need to choose a hosting. I decided to use the 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 website. In the future, the calculations of the site occur in one team.
  • Under the application server, the usual Ubuntu, so if you need something other than an http server, it will be easy to use.
  • It is free (for our needs).

Register on heroku.com , if not already.

After registration, you will see this prompt:
Heroku setup

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

Fill the site on Heroku


There is a hosting - it's time to put a website 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 github login> / programmer-site
cd programmer-site
heroku apps: create <your app name>

The name should 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 laying out a site by simply pushing it into its git repository. We type in the console:

git push heroku master

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

Set up your domain


It’s unlikely that the address on herokuapp.com is suitable for your personal site. We will bind our own domain.

If you don’t have your own domain yet, you can register it for free, for example, in the .tk zone.

We go to http://dot.tk

Enter the name of your future domain

dot.tk start

In the ip input field, specify one of the ip provided by heroku . Eg 75.101.145.87.

dot.tk enter ip

Done.

dot.tk ready

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”. Done.

heroku domain settings

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

We create the look of the site


Despite the fact that the site template in my example is incomparable and ingenious, you are unlikely to want to leave it. Therefore, the next part 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.
  • The best of its kind according to its capabilities: 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 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 design suitable for you:


For the third paragraph, the following links may be helpful:


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

Saving and posting 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, do:

git commit -a -m "description of the changes made"
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. Think for yourself.

If this article turns out to be interesting enough (picks up at least a couple of dozen pluses), there will be a sequel.

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

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

Also popular now: