I’ve been through many tutorials and I couldn’t find any fully detailled ones so I decided to write mine. I have to explain, I set up VSFTPD on my personal server, wrote the tutorial step by step then followed my own tutorial to deploy VSFTPD on my production dedicated server.

What we will do

1. Install vsftpd and a PAM library
2. Edit /etc/vsftpd.conf and /etc/pam.d/vsftpd
3. Create user accouts with custom directories (in /var/www/ for example)
4. Set directories with the correct chmod and chown
5. Create a admin user with full access to the server
6. Troubleshoot

1. Install vsftpd (Very Secure FTP Deamon) and libpam-pwdfile to create virtual users

I wanted to create FTP users but I didn’t want to add local unix users (no shell access, no home directory and so on). A PAM (Pluggable Authentication Modules) will help us creating virtual users.

sudo apt-get install vsftpd libpam-pwdfile

2. Edit vsftpd.conf

First we need to back up the original file

sudo mv /etc/vsftpd.conf /etc/vsftpd.conf.bak

Then create a new one

sudo vim /etc/vsftpd.conf

Copy and paste the following lines. The file should contains ONLY theses lines:

listen=YES

anonymous_enable=NO

local_enable=YES

write_enable=YES

local_umask=022

nopriv_user=vsftpd

virtual_use_local_privs=YES

guest_enable=YES

user_sub_token=$USER

local_root=/var/www/$USER

chroot_local_user=YES

hide_ids=YES

guest_username=vsftpd

3. Register virtual users

To register user we use htpasswd so I assume you have apache2 working on your server. Create a vsftpd folder, we’ll put configuration files in it.

sudo mkdir /etc/vsftpd

then

sudo htpasswd -cd /etc/vsftpd/ftpd.passwd user1

• -c means that we’ll create the file if it’s not existing yet
• -d forces MD5, you need it on ubuntu 12.04, just use it always

If you want to add new users afterwards:

sudo htpasswd -d /etc/vsftpd/ftpd.passwd user2

4. Configure PAM in /etc/pam.d/vsftpd

Again, we need to back up the orignal file

sudo mv /etc/pam.d/vsftpd /etc/pam.d/vsftpd.bak

and create a new one

sudo vim /etc/pam.d/vsftpd

Copy and paste these 2 lines (this should be the only content). I insist, I wasted a lot of time because I kept orignal lines and just added these.

auth required pam_pwdfile.so pwdfile /etc/vsftpd/ftpd.passwd

account required pam_permit.so

5. Create a local user without shell access

sudo useradd --home /home/vsftpd --gid nogroup -m --shell /bin/false vsftpd

You can check that it has been created with the id command: id vsftpd. We define the user with the /bin/false shell because of the check_shell parameter (even if we don’t use it).

6. Restart vsftpd

The common way is using init.d like all deamon

sudo /etc/init.d/vsftpd restart

In Ubuntu 12.04 there is something new with services. It worked on my 12.04 but not on my 10.04 one. To be honest I’m not a Linux expert (yet) so I can’t explain why. Something to do with Upstart I think.

sudo service vsftpd restart

7. Create directories

According to our configuration all users will be placed into there folder: /var/www/user1.

You need to create them with particular rights: the root folder cannot be writable!

•  / [root = /var/www/user1] => 555
  • www [ /var/www/user1/www ] => 755
  • docs [ /var/www/user1/docs ] => 755

In vsftpd.conf we have chroot_local_user=YES so the user can’t see anything outside his folder. To him the server looks like this:

Anyway, just run these commands:

mkdir /var/www/user1

chmod -w /var/www/user1

mkdir www/user1/www

chmod -R 755 /var/www/user1/www

chown -R vsftpd:nogroup /var/www/user1

The /var/www/user1 folder HAS TO exist or connection will fail.

Right now you can try to connect with your FTP client and it will succeed! If it doesn’t you can check the troubleshooting part.

8. Create an Admin user to access the entire server

To create an admin user we need to register a new user with htpasswd.

Before we do so, I’ll advice you to check into the /etc/ftpusers file that define certain users that are not allow to connect with ftp. I think it’s only for local users and not virtual users but just in case don’t choose a name contained into this file. Let’s be honest, vsftpd is complicated enough! ^^

sudo htpasswd -d /etc/vsftpd/ftpd.passwd theadmin

Now we need to add a new line into /etc/vsftpd.conf

chroot_list_enable=YES

This means that your user will be placed into their folder (as a jail) EXCEPT users into the /etc/vsftpd.chroot_list

Let’s create this file and add our user, the file is a simple line containing “theadmin”. Add one user per line. That means we DON’T need to create a /var/www/theadmin folder, the user will login placed into /home/vsftpd.

Restart the server and you are done !

Troubleshooting

Here are some errors I had.

500 OOPS: vsftpd: refusing to run with writable root inside chroot ()

Your root directory is writable, this is not allowed. Check part 7 for more information, you need to create a 555 root and 755 subfolders

500 OOPS: cannot change directory:/var/www/theadmin if the folder doesnt exist

The /var/www/$USER folder doesn’t exist, create it with the correct rights (not writable) or add the user into the /etc/vsftpd.chroot_list (see part 8). Don’t forget to restart the server.

htpasswd: cannot create file /etc/vsftpd/ftpd.passwd

The /etc/vsftpd/ folder has to be existing, htpasswd won’t create it.

vsftpd restart or stop error: “restart: Unknown instance“

This means you can’t start the deamon even if you have success message with /etc/init.d/vsftpd start. It doesn’t start because your configuration is wrong. Start over this tutorial

Sources

Here are some websites that helped me

• My favorite one: http://www.debiantutorials.com/installing-vsftpd-using-text-file-for-virtual-users/
• The man page: https://security.appspot.com/vsftpd/vsftpd_conf.html
• this one says something about allow_writeable_chroot but it’s not in the man page: http://www.benscobie.com/fixing-500-oops-vsftpd-refusing-to-run-with-writable-root-inside-chroot/
• http://ubuntuforums.org/showthread.php?t=518293

Easy

1. Take my medicine on a regular basis (my asthma need it).
2. Brush my teeth 2 times a day. If I don’t want to end up as a rapper, it would be an idea.
3. Learn a new technology. I said it last year, this year I want to learn Python. I aslo want to start a PHP framework (CodeIgniter or Symfony).

Complicated

1. Become an early riser. I’m thinking about it for year, I have to do it now.
2. Eat better. I’m not even talking about weight, I have to eat less and healthier.
3. Read more. I bought some books some weeks ago and there is some I want to read, I should make time for this.

Extra and must be done

1. December 31st, 2012, I will weigh less than 61Kg.

This post was originally posted on Tumblr

Rappel historique

On a dabors mis en ligne un premier site, toujours en ligne, http://v1.lascenenantaise.net/, le deal etait donc, je m’occupe du site, il s’occupe du myspace (et du design du site). Mon tout premier site WordPress était en ligne! Après un petit moment, un an je crois, je me suis lancé dans un nouveau theme, un magazine (très en vogue à ce moment là). Bref Jo reprend le design en main. On essaie de mettre en ligne pas mal de page, il faut avouer qu’on était sur motivé. Pendant ce temps Jonathan a completement refait le myspace avec le même design. Cette v2 apportait pas mal de nouveauté, création d’un Twitter, intégration de Facebook Connect, et surtout ajout d’une page agenda généré à partir de la liste du myspace(merci cURL).

Après la mise en ligne de la v2, on a vite remarqué que le rythme était trop soutenu et que ce genre de site demandait beaucoup de temps et beaucoup d’investissement pour être à jour. Il faut maintenir la liste des concerts sur myspace, ce qui est loin d’être une partie de plaisir mais surtout il faut rester au courant de tout ce qui se passe. Je me dis qu’il est grand temps de penser à une v3 qui pourrait enfin relancer le site. Il faut dire qu’il n’a casiment pas été mis à jour depuis 1 an et que, depuis la nouvelle version de myspace, la page agenda est hors-ligne.

Nos erreurs

Après un moment voilà ce que je retiendrais comme des erreurs.

1. C’est un blog
Un blog demande de rédiger des billets, un minimum de contenu, des illustrations… donc du temps. A chaque information, chaque news, même les plus breves doivent être étoffé. Difficile d’imaginer un billet de moins de 100/120 mots et sans image.

2. Un agenda trop limité
La page avec l’agenda complet est généré à partir du myspace, donc il s’agit simplement d’une date, les groupes et un lieux. Pas de details, pas de prix, pas de liens,… En fait l’agenda n’était qu’un gadget.

3. Une mauvaise home page
La home page séparait les news en catégorie, donc pour pouvoir la renouveler il faut poster beaucoup de contenu… mauvais choix.

4. Manque de contenu
Très clairement le site n’était pas assez étoffé. On en revient au problème 3 mais aussi au fait que personne ne prend l’habitude d’aller sur un site mis à jour 2 ou 3 fois par mois. Pas de visiteur régulier donc.

5. Pas assez d’automatisme
La beauté de l’informatique c’est de pouvoir automatiser son travail. Il faut mieux passer beaucoup de temps au debut pour scripter quelques taches afin de se simplifier la vie ensuite. Le site n’était pas  suffisamment automatisé, besoin d’éditer des custom fields de wordpress, besoins d’ajouter l’ID du billet pour afficher une banniere en home page. Besoin d’editer le code pour afficher les flyers, bref beaucoup trop de temps perdu.

6. Trop peu d’originalité
Surement le plus gros problème: le contenu. Trop peu d’originalité! La plupart des news avait été déjà publié sur nantesmonamour.com ou bien meme des sites comme leboost. Voila à mon sens les principaux problèmes, si vous avez des remarques ou commentaires, vous pouvez les publier plus bas.

La situation actuelle: Facebook

Aujourd’hui Myspace est clairement en train de mourir. A ma connaissance les groupes l’utilisent toujours, au moins pour tenir leur agenda et avoir une page en ligne avec un minimum de customisation graphique mais le public a déserté.

En 2011 sur internet tout se passe sur Facebook, c’est pareil pour les évènements, la musique, les photos,… Tout migre sur facebook.

Je pense toujours que les évènements facebook ne sont pas aussi pratique qu’un bon site d’agenda. Par contre le système de RSVP, de like, de publication sur le mur, de commentaire et autres sont à exploiter.

RFC pour la version 3 de Lascenenantaise

En un mot: agrégateur. Pour l’instant je pense qu’une bonne idée serait de mettre en place une plateforme qui réunirait du contenu de facebook, de forums et de sites divers.

1. Le design

Le design du nouveau site devra être considérablement allégé et simplifier. Je suis très fan de la structure et du design de peoplespress.org, le site sera probablement dans cette esprit… très proche même!

A priori on conservera les même couleurs, le design ne devrait pas être révolutionné. J’aimerais surtout un design simple à intégrer.

2. La plateforme

A priori je compte rester sous WordPress et probablement baser le site sur Thematic. J’utilise ce couple depuis plusieurs moi et je m’y suis pas mal habitué. WordPress est devenu extrêmement puissant au cours du temps et Thematic évite pas mal de travail ennuyant.

Ce soir j’ai jeté un oeil aux fonctions wp_insert_post() et add_post_meta() qui permettent de pouvoir poster un article à partir d’un script (cf le code suivant).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require_once('../../../../wp-blog-header.php');



function add_one_post(){

  // Create post object

  $my_post = array(

    'post_title' = 'Le titre de mon post',

    'post_content' = 'Ce post est créé à partir d une fonction',

    'post_status' = 'publish',

    'post_category' = 1

  );



  // Insert the post into the database

  $id = wp_insert_post( $my_post );

  add_post_meta($id, 'source', 'http://sigerr.org/');

}



add_one_post();

L’idée est de pouvoir créer quelques script qui généreraient des posts à partir de très peu d’information, comme une url facebook ou youtube.

3. Les photos

C’était déjà une idée pour la version 2, il faudra la mettre en place pour la version 3. Il s’agit de poster automatiquement quelques photos d’un photographe et ensuite rediriger vers le site origial.

L’intérêt pour nous est d’avoir plus de contenu et pour le photographe de gagner quelques visiteurs. A priori il est déjà connu, mais je pense des visiteurs moins réguliers et moins impliqués.

Exemple parfait: http://thrasher44.blogspot.com/

L’homme qui est à tout les concerts! On pourrait poster 5 ou 6 photos (automatiquement à partir du flux RSS) et ensuite renvoyer le visiteur son blog.

4. Les vidéos

Beaucoup de vidéos sont interessantes mais il n’est pas forcement facile de les retrouver. De simple post avec une video, un titre, des tags pourrait enrichir aussi le site. Il devrait etre possible de simplement créer un fichier texte avec toutes les URLs et ensuite récupérer le contenu depuis youtube.

On peut même créer un bonton dans le navigateur (un bookmark) qui post automatiquement la video que l’on regarde (à condition d’être sur youtube).

Avec le nouveau systeme de custom_post_type cela devrait pouvoir se faire plutôt bien.

5. Annoncer ses dates, ses albums,…

Cette nouvelle version devra offrir la possibilité à tous les visiteurs de pouvoir poster des actus, dates,…

Mais il faudra pouvoir modérer un minimum et bien sur ajouter un disclaimer  selon les cas.

6. L’agenda

C’est le coeur du site, il faut trouver une idée de génie pour un agenda le plus complet et le plus puissant possible. J’y réflechis.

Aujourd’hui j’ai testé la synchonisation des events facebook avec Google Calendar. Cela permet beaucoup de possibilités, par exemple la synchronisation avec d’autres logiciels mais surtout l’affichage est très clair. Dès que vous êtes invité à un évènement sur facebook, il apparait dans Gcal, donc attention aux spams aussi.

Problème: difficile de lier l’agenda à l’event sur le site pour plus de details… ou de pages vues.

Edit: Visiblement la synchronisation se contente de vous noter “busy” sans détailler les events.

Une possible piste avec une application facebook: https://www.facebook.com/apps/application.php?id=101709316537832

Ensuite il faudra integrer le calendar dans wordpress, idéalement il faudrait 2 vues. Une vue calendar classique et une vue en liste. Tout ca ne semble pas super compliqué avec ces quelques plugins:

1. Magnigique plugin pour obtenir une liste ou bien une grille: http://wordpress.org/extend/plugins/google-calendar-events/
2. Un peu le même genre: http://code.google.com/p/wpng-calendar/
3. Personnaliser l’affichage du calendrier: http://wordpress.org/extend/plugins/google-calendar-weekly-timetable/

7. Les magasins

Faire une page avec les shop interessants à nantes et afficher les flux rss.

Exemples:

• http://rideall.blogspot.com/
• http://www.milkskate.com/index.php?option=com_myblog&Itemid=61 (pas de flux)
• http://ndjsk8shop.over-blog.com/
• http://siroccosk8.blogspot.com/
• http://www.myspace.com/rockagogovpc/blog
• http://www.laboutik.fr/index.php (pas de news :s)
•  ??

Cliquez pour agrandir le brouillon

8. Login et commentaires

Le système de commentaire de Thematic est plutôt puissant. Il faudra voir pour l’intégration d’un plugin du genre Discus.

Pour le login, utilisation de Facebook Connect ou Twitter Connect simplifiera l’inscription.

Conclusion

Bon voila en relisant tout ça je me dit que ca ne devrait pas être prêt avant Noël… et encore ! Ca promet beaucoup de boulot mais avec un fonctionnement plus automatique, on devrait finalement être largement gagnant.

Après quelques courtes recherche l’intégration facebook ne devrait pas être aussi poussé que prevu, trop complexe.

Ps: si vous aimez les petits LU, passez par ici.

Anyway, as I’m a big fan of Thematic, I thought that I could use Thematic to create easily this kind of website. So I wrote some lines and made a child theme. Also, you can easily use this child theme as a template page with your own child theme.

Features

Basically you will display on only one page, let’s call it ‘page 1′, every child page (subpage). Your page 1 is a wrapper that contains many page with a submenu. Each part is linked as an anchor using the slug. Therefore URLs are pretty friendly.

The menu is defined once and then printed everytime.

I still didn’t add some JS to make the page scroll up and down but I will… one day. Now it’s done and its based on Ariel Flesler’s plugin.

Documentation

If you want to use it on its own, you can download the files and add them in the themes folder. If you want to add it to your child theme you can follow these steps.

The template page

In your folder create a new php file called ‘onepage.php’ and paste this code. The file name is important for the css rules (cf: thematic_body_class function).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php

/**

*

* Template Name: One Unique Page

*

**/



  // calling the header.php

  get_header();



  // action hook for placing content above #container

  thematic_abovecontainer();



  $id = get_the_id();

  thmonepage_navigation($id); //Define the menu

  query_posts( "post_type=page&post_parent=$id&orderby=menu_order&order=ASC" );



  $count = 1;

  if ( have_posts() ) : while ( have_posts() ) : the_post();



    if(function_exists('childtheme_override_onepageloop')){

      childtheme_override_onepageloop();

    } else {



      $the_slug = basename(get_permalink());

    ?>



        <div id="container" class="container-<?php the_ID(); ?> container-<?php echo $the_slug; ?> <?php echo ($count%2==0)?'even':'odd'; ?>">

        <a name="<?php echo $the_slug; ?>"></a>

          <?php thematic_abovecontent(); ?>



          <div id="content">



              <?php echo MY_MENU; ?>



              <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <h3><?php the_title(); ?></h3>

                <?php the_content(); ?>

              </div>



          </div><!-- #content -->



          <?php thematic_belowcontent(); ?>



        </div><!-- #container -->



    <?php

    }

  $count++;

  endwhile;



  else:

    echo "<em>No content available</em>";

  endif;



  wp_reset_query();



  // action hook for placing content below #container

  thematic_belowcontainer();



  // calling footer.php

  get_footer();

?>

The Style

Add these following lines in your style.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* =Page Templates

-------------------------------------------------------------- */



/*

    One Page template

*/

.page-template-onepage-php #main {

  width:100%;

}



.page-template-onepage-php #container {

  margin:0;

  width:100%;

}



.page-template-onepage-php #content {

  margin: 0 auto;

  width:940px;

}



.page-template-onepage-php #comments {

    width:940px;

}



.page-template-onepage-php #comments {

    width:940px;

}



.page-template-onepage-php h3 {

    font-size: 24px;

  margin: 10px 0;

}



.page-template-onepage-php #container #access {

  margin: 16px 0;

}



.even {

  background: #f5f5f5;

}

.odd {

  background: #ffffff;

}

The functions.php

And finally add this simple function in you functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php



function thmonepage_navigation($id){

  $indexurl = get_bloginfo('url');

  $content.= "<div id='access'><div class='menu'> \r\n <ul class='sf-menu sf-js-enabled'> \r\n";



  query_posts( "post_type=page&post_parent=$id" );

  while ( have_posts() ) : the_post();

      $post_id = get_the_id();

      $title = get_the_title();

      $slug = basename(get_permalink());

      $content.="\t<li class='page_item page_item_".$post_id."'><a href='#".$slug."'>".$title."</a></li> \r\n";

  endwhile;

  wp_reset_query();



  $content.= "</ul> \r\n </div></div>\r\n";



  define(MY_MENU, $content);

}

Miscellaneous

Remove Thematic menu

If you want to use this page into a bigger website you will probably keep a main menu. To display this menu on everypage except these using this templage, ass these lines in your styles.css.

1
2
3
4
/* Remove the main menu on this template only */

.page-template-onepage-php #header #access {

  display: none;

}

If you want to purely remove the access menu, add these lines in your functions.php

1
2
3
4
function thmonepage_remove_access() {

  remove_action('thematic_header','thematic_access',9);

}

add_action('init', 'thmonepage_remove_access');

ChangeLog

0.2

• Added JS to scroll
• Corrected the page order (now in the menu order)

Anyway, this function displays each child page title, link and a description. The description is stored in a custom field “desc” in each subpage.

About

This function is actually easy but could help you to save some time.

The function is based on get_pages(). To make it works you need to create a page and some child page. In each child page create a custom field with the key “desc” and fill the value with a little description.

Install

Add this function is your functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php



/*

 *   Template Parent Page

 **************************************************/



function sigerr_display_subpage_list($parentID)

{

  //Get all the child page of the current page

  $pages = get_pages('child_of='.$parentID.'&sort_column=post_date&&sort_order=asc&echo=0');

  ?>



    <div id="childpagelist" class="">



  <?php

  //Echo the list

  foreach($pages as $page) {

    $link = get_permalink($page->ID);

    ?>

        <h2>

          <a href="<?php echo $link ?>" title="See the entire page about <?php echo $page->post_title; ?>">

        <?php echo $page->post_title; ?>

            </a>

        </h2>

        <p>

          <?php if( get_post_meta($page->ID, "desc", true) ){

        echo get_post_meta($page->ID, "desc", true);

      }else{

        echo "No details available, let's check that page!";

      }?>



      <p>See: <a href="<?php echo $link ?>"><?php echo $link ?></a></p>



        </p>

        <?php

  }

  ?>



    </div>



  <?php

}



?>

This function is now available in your theme

Create a Template Page

Create a new template for wordpress page. If you dont know how, just copy your page.php file and rename it in ‘template-page-parent.php’.

Then add this at the very top of the file.

1
2
3
4
5
6
7
8
9
<?php

/**

 * Template Name: Parent

 *

 * This template display a list of each child page with details.

 * Details are stored in a custon field 'desc' in child pages

 *

 */

?>

Then locate the piece of code “the_content()”. This function print the content of the post. You should probably print the list just after this function.

<?php display_subpage_list($post->ID) ?>

This function print the list into a div#childpagelist.

If you get any trouble, feel free to leave a comment.