Improving documentation.
[libreplanet-static.git] / 2017 / README.md
1 README version for LibrePlanet 2017
2
3 Heads up: to edit the Web site, you'll need a basic-to-intermediate understanding of HTML and git.
4
5 ##### SECTION 1: DEVELOPMENT WORKFLOW #####
6
7 The actual LIVE site, visible at libreplanet.org/YEAR, is served from the "stable" branch of the git repository using a git hook. There is also a development branch called "master" which we use to preview edits on the Web. The master branch is served to the Web at http://wiki-dev0.libreplanet.org/YEAR and publicly visible, but not linked to.
8
9 Full workflow to make, test and deploy an edit
10 -----------------
11
12 * Check out the master branch and make sure it is up to date with origin/master.
13 * git checkout master
14 * git pull
15 * If this a large edit or a small edit? If it is small, edit, work in master. If this is a large edit that will take longer than a day, make a new branch based on the master branch and work there.
16 * Make your edits. (See instructions for editing content below.)
17 * Optionally, test them on your computer with a local development environment. (See instructions below for setting up your development environment).
18 * If you are working on your own branch created for your edit, merge, your branch into master.
19 * git checkout master
20 * git merge BRANCHNAME
21 * Push master
22 * git push
23 * Review the edited version of the site at http://wiki-dev0.libreplanet.org/YEAR. You can share this with others.
24 * When you are satisfied, merge master into stable and then push stable.
25 * git checkout stable
26 * git merge master
27 * git push
28 * Your edits are now live and visible at libreplanet.org/YEAR
29
30 ##### SECTION 2: EDITING INSTRUCTIONS #####
31
32 This site is built with [Bootstrap 3.3.5](https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip) and [jQuery 1.11.1](http://code.jquery.com/jquery-1.11.3.js) but you do not need to understand either of these technologies to make minor content edits to the site.
33
34 Creating a New Page
35 -------------------
36
37 *Boilerplate*
38
39 Add the following to your new page (it should remain commented out, as that is the syntax for SSI):
40
41 ```
42 <!--#include virtual="/2017/includes/header.html"-->
43 <!--#include virtual="/2017/includes/banner.html"-->
44 <!--#include virtual="/2017/includes/sidebar.html"-->
45 <!--#include virtual="/2017/includes/footer.html"-->
46 <!--#include virtual="/2017/includes/close.html"-->
47 ```
48
49 This will include the header, banner, sidebar, footer and closing tags
50 saving you from duplicating HTML.
51
52 If JS is needed for a page, then create a file, containing the JS
53 includes, in `/2017/includes/` & use SSI to include it in the page.
54
55 Use `/2017/includes/boilerplate.html` to start a new page.
56
57 *Add Your Markup*
58
59 Add HTML markup in-between the sidebar and footer includes.
60
61 *Enable SSI*
62
63 Files that contain include directives must be marked as executable
64 otherwise Apache will not parse them. (The directive `XBitHack on` in the .conf file pasted above enables this behavior).
65
66 To mark a file as executable, run:
67
68 ```
69 chmod +x foo.html
70 ```
71
72 Replace `foo.html` with the desired file name.
73
74 Modifying top-right corner
75 --------------------------
76
77 In the `/2017/includes/banner.html` find the `...#top-right-desktop
78 start...` section.
79
80 *For register now*
81
82 Include `register-now.html`
83
84 <!-- #top-right-desktop start -->
85 <!--#include virtual="/2017/includes/register-now.html"-->
86 <!-- #top-right-desktop end -->
87
88 *For join LP list form*
89
90 Include `join-list.html`
91
92 <!-- #top-right-desktop start -->
93 <!--#include virtual="/2017/includes/join-list.html"-->
94 <!-- #top-right-desktop end -->
95
96
97 ##### SECTION 3: SETTING UP A LOCAL DEVELOPMENT ENVIRONMENT #####
98
99 Apache is required in order to replicate the appearance of the website
100 on the live and staging servers on your machine. If you don't want to
101 install Apache, you can still work on the site, you just won't be able
102 to see what it looks like until you push to the remote.
103
104 Modifying Apache's configuration files and running its executables
105 typically requires root access. So, you will most likely need to run
106 the commands below as the root user using `sudo`.
107
108 *Enable server-side include module*
109
110 ```
111 a2enmod include
112 ```
113
114 If this doesn't work, you may not have Apache installed. Install the
115 package apache2 from your package manager.
116
117 *Create virtual host*
118
119 Create a new file called libreplanet (libreplanet.conf for Apache 2.4) in `/etc/apache2/sites-available` with the following contents:
120
121 ```
122 <VirtualHost *:80>
123 RewriteEngine on
124 ServerName local-dev.libreplanet.org
125 ServerAdmin webmaster@localhost
126 DocumentRoot /local-path/path-to-site
127 <Directory /local-path/path-to-site/>
128 Options Indexes FollowSymLinks MultiViews
129 AllowOverride All
130 Require all granted
131 Order deny,allow
132 deny from none
133 allow from all
134 SSILegacyExprParser on
135 Options +Includes
136 XBitHack on
137 </Directory>
138 ErrorLog /home/owner/libreplanet-static/logs/error.log
139 CustomLog /home/owner/libreplanet-static/access.log combined
140 </VirtualHost>
141 ```
142
143 Replace all instances of `/path/to/libreplanet-static` with the full path to the root directory of your local
144 git repository.
145
146 *Enable virtual host*
147
148 ```
149 a2ensite your-virtual-host
150 ```
151
152 Replace `your-virtual-host` with the name of virtual host file you made (in this case, libreplanet).
153
154 *Restart Apache*
155
156 ```
157 service apache2 restart
158 ```
159
160 *Edit your hosts file*
161
162 Edit your system's `/etc/hosts` file and add the following to the bottom:
163
164 ```
165 127.0.0.1 lp2017.libreplanet.org
166 ```
167
168 *Test*
169
170 Visit <http://lp2017.libreplanet.org/2017> in your web browser. If
171 everything is configured properly, you will see the LibrePlanet 2017
172 site, complete with header, sidebar, and footer.