Website for the programmer. Part 2. Publication

  • Tutorial

In the first part, I talked about how it is relatively easy for a programmer to start his own website from scratch using Github, Heroku and Twitter Bootstrap.

But running a site is not enough. Most likely, you will want to periodically spread something on it. For example, new projects in a portfolio, or blog entries.

In this part I will tell you how to create the publishing mechanism for your site as simple as possible, which will not decide anything for you (like most existing services), but will allow you to do everything the way you want, allowing you to automate what you can automate.


Database - github


We will not use a DBMS. The content of the site will be stored in files, which, in turn, will be stored on github.

Thus, you do not need to worry about backup, import and export of data. Working with files is simple and convenient.

To add a page to a site or publish an article, you just need to create a file and save it in the repository. Nowhere is easier.

If you read the first part of the article , then you already have a repository on github and you don’t need to do anything else.

Publishing system - docpad


Writing a blog in html format is not the greatest pleasure. In addition, each page and article must at least set a URL and wrap in a common template.

Fortunately, there is a magic docpad library that will take on all these boring tasks. I will not describe in detail what she can do, it’s easier to follow the link and read there.

Those who know about jekyll or other static site generators may ask why docpad? I chose it because:

  • He does not impose a method of his use. It can be used as a site generator, as an engine, as part of the engine, as a template engine in the end. It has a convenient API that allows you to take exactly those functions that you are missing, if necessary, implement the rest yourself.
  • It allows you to create dynamic pages, not just statically generate them.
  • Site content is organized into a convenient in-memory database with which you can do whatever you want.

If you want to discuss the pros and cons - welcome to comment.

In the meantime, try all this in action.

Launch the site framework


In the first part of the article, I already described how to clone a repository on github and upload it to heroku, I will not repeat it. This time the code is here: http://github.com/daeq/docpad-sample . Fork, clone, upload to Heroku.

For the lazy, the simplest set of commands, provided that the heroku-toolbelt is already installed.

git clone git@github.com: daeq / docpad-sample
cd docpad-sample
heroku apps: create docpad-sample
git push heroku master

After running this code, you will see a site like this: http://blog.programmer-site.tk .

Publish


Pay attention to three folders:

  • src / layouts - here are the page templates. They can be inherited from each other (see index and post patterns)
  • src / public - here are the files that will be accessible from the root of your site (i.e. the src / public / favicon.ico file will be available at http: // <your domain> /favicon.ico)
  • src / documents - here are the actual pages and texts.

Any folder can be configured. The configuration is in the app.js. file

Pages and texts are organized by docpad in convenient collections. How to work with the collection, see src/documents/posts.html.eco.

To add a new blog post, just create a new file in the src / documents / posts folder. Depending on the file extension, it will be processed differently. .html - for html-files, .md - for markdown-markup. Other formats are supported. If you don’t have enough of them, you can write your own plugin.

I personally prefer to write in Markdown format . It is easy to write, easy to read, easy to convert to other formats, there are a bunch of tools to work with it.

Now add a new file to the src / documents / posts folder, reload / restart the application, and see how a new one appears in the list of posts.

You may notice a block delimited by characters at the beginning of the file ---. This is the document metadata. Typically, a document has at least one metadata field - layout. You can add your own custom fields, which you can use later wherever you deal with this document. For example:

  • Override the date field and sort blog posts by it (and not by file creation date, as is done by default)
  • Add the tags field, display tags in the post layout and filter pages / posts by tags.
  • Add a series field and in each of the posts of the series (for example, like this series of two posts about the programmer’s site) display links to other posts in the series.

Comments


We will not write our implementation of comments. Everything was done for us a long time ago. A short list of services that will allow you to add comments to your site:


I chose the third option, because it allows you to comment not only on the whole page, but also on individual phrases in the text. Very great for technical articles.

It looks like this:

Hypercoments widget

Sharing


You probably want people to tell each other about your site. There are even more services that allow you to add a sharing widget than comment services. I chose http://addthis.com . Simple, beautiful, and with good analytics.

The widget looks like this:

Addthis widget

Collaboration


There will probably be errors and inaccuracies on your site. In addition, information becomes obsolete over time. It would be very convenient to give your readers the opportunity to correct something in your texts.

Fortunately, you do not need to do anything extra for this. Github gives you great functionality for this task. Just give a link to the file with the page in the github and anyone can suggest changes to your files, and you can view them and accept or reject.

This is the pull request mechanism . You can use it directly from the web interface.

You can try to suggest changes to this article.


It seems that now we have a minimal set of functions for publishing on our website. It can be supplemented and sharpened to your needs. Good luck
Tags:

Also popular now: