This tutorial will walk you through making your own blog. To build it, we're going to use the Ruby programming language and a web library for it called Sinatra.
Before we start we need to install a couple of tools. Ruby is an "interpreted" programming language, so we'll install a special program called an interpreter that will run your Ruby code. The installer also includes some other tools that help you out when building Ruby programs.
Now that you have the tools installed, let's make a very simple web application. First we need to make a directory to hold our application.
On your computer, make a folder called blog. You can put it anywhere you like on your computer. On Windows a good place to put it is in C:\My Documents.
Now we need to install the Sinatra library. Ruby libraries are packaged up into things called "rubygems". You can use the gem program to install them. To install Sinatra, run:
gem install sinatraThis will download all of the program files and documentation for Sinatra and install them on your computer. It might take a few minutes to complete.
Once the gem is installed, make a new file in your blog folder called app.rb and open it in Atom.
Put the following text in app.rb. Make sure you copy it exactly.
require 'sinatra'
set :bind, '0.0.0.0'
get '/' do
'Hello world!'
endSave your file in Atom, then open a command prompt, navigate to your app directory, and start your program. If you're on Windows and put your file in My Documents you can use these commands:
cd code
ruby app.rbOpen a web browser and navigate to http://localhost:4567. You should see a page that says "Hello world!". That means your web app is working!
That's pretty cool, but every time you visit the page it will just say "Hello world!". The nice thing about web apps is that they can change their pages based on user input. Let's modify our app.rb a little to see how this works.
Below the code you already have, add this:
get '/hello/:name' do
"Hello #{params['name']}!"
endGo back to your command prompt and stop your Ruby server. You can do that by holding down the control button and pressing the C button. Now start it back up:
ruby app.rbNow, in your browser you should be able to go to http://localhost:4567 and still see "Hello world!", but now you can get the app to greet you by name. My name is Matthew, so if I go to http://localhost:4567/hello/Matthew in my browser, I should see "Hello Matthew!" Try it with your name.
Awesome! Now we have a web app that dynamically generates web pages based on what you input! But it still just outputs plain text. That's kind of boring.
Let's make a page that we can decorate. To do that we'll use HTML.
We could just put HTML straight into our app.rb file. That would work, but after a while the code would get kind of messy and confusing. In web apps, it's good to keep the action code like what we have in app.rb separate from the code that displays how stuff looks. Programmers refer to the action code as the "controller" and the display code as the "view". Let's make a view for the main page of our app.
Edit your app.rb file and change this part:
get '/' do
'Hello world!'
endso that it looks like this instead:
get '/' do
erb :index
endNow, make a new folder inside of your blog folder and call it views. Inside the views folder make a new file in Atom called index.erb. Edit that file and write:
Hello world!Go back to your command prompt and stop and start your webserver like we did before. Now go to http://localhost:4567 in your browser again. It should still say "Hello world!".
Congratulations, you've now separated your view from the controller. Let's spruce it up a bit now. Edit index.erb again and add the following HTML. Use your name instead of Matthew.
<html>
<head>
<title>Matthew's Blog</title>
<body>
<h1>Matthew's Blog</h1>
<p>Hello world!</p>
</body>
</head>
</html>When you refresh it, you should see a big header with your name and "Hello world!" below. Great! Now let's add a form for making posts.