Hacer un Blog

Vamos a hacer un blog muy sencillo desde cero. Va a tener una funcionalidad muy básica, sin ni siquiera incluir un sistema de usuarios.

Preparación

Tendremos que tener instalado todo lo que hemos explicando en la introducción para poder continuar.

Creamos una nueva carpeta que se llame "Blog" y accedemos a ella desde la terminal. Dentro creamos la siguiente estructura de archivos:

Blog/
  controller/
    blog.js
  model/
    post.js
  views/
    article.pug
    index.pug
    layout.pug
    write.pug
  public/
    ...

  index.js
  Procfile
  package.json

Configuración del servidor

Empecemos por app.js, que es donde se está ejecutando el servidor basado en express.js. Dentro de app.js tendremos:

// Definición de las variables a usar
var express = require('express');
var app = express();

var bodyparser = require('body-parser');
var mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/test');

var blogController = require('./controller/blog');



// Configuración del servidor
app.set('views', './views');
app.set('view engine', 'jade');

app.use(express.static('public'));
app.use(bodyparser.urlencoded({ extended: false }));



// Las rutas que acepta blog
app.get('/', blogController.index);
app.get('/write', blogController.write);
app.post('/write', blogController.save);
app.get('/:id', blogController.article);


// Lanzar el servidor en el puerto que toca
app.listen(process.env.PORT || 3000, function () {
  console.log('Example app listening on port 3000!');
});

Como vemos, lo único que están haciendo las rutas es llamar al controlador que se encuentra en controller/blog.js y el resto de app.js es configuración de diferentes tipos del servidor.

Ahora abrimos controller/blog.js a ver qué tiene:

var postModel = require('../model/post.js);

// Muestra una lista con todos los artículos
module.exports.index = function(req, res){
  postModel.find({}, function(err, posts){
    res.render('index', { posts: posts });
  });
}

// Muestra un único artículo
module.exports.article = function(req, res){
  postModel.findOne({ _id: req.params.id }, function(err, entry){
    if (err) console.log(err);
    res.render('article', entry);
  });
}

// Muestra el formulario para escribir un nuevo artículo
module.exports.write = function(req, res){
  res.render('write');
}

// Guarda el nuevo post cuando lo enviamos
module.exports.save = function(req, res){
  var entry = new postModel(req.body);
  entry.save(function(err, saved){
    if (err) console.log(err);
    res.json(saved);
  });
}

Y por último, dentro del model/post.js tendremos:

var mongoose = require('mongoose');

var personSchema = mongoose.Schema({
  author: { type: String },
  author: { type: mongoose. },
  title: { type: String },
  content: { type: String },
  time: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Person', personSchema);

Views

Ahora nos creamos las views necesarias. Para layout.jade:

doctype html
html
  head
    block title
      title Página Web
    meta(charset="utf-8")
    meta(name='viewport' content='width=device-width, initial-scale=1')
    link(rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.min.css")
    link(rel="stylesheet" href="style.css")
  body

    nav
      a.brand(href="/") Mi super blog

    block content

Para index.jade:

extend ./layout.jade

block content
  p Hola! Mostrando la lista de entradas:
  
  each entry in posts
    div.card(data-id=entry._id)
      header
        h2= entry.title
      section= entry.body

Y en project.jade:

extend ./layout.jade

block title
  title= project.title + " - Mi Web"

block content
  h2= project.title
  article= project.body