|
1 | | -# The code that runs the WiCS site # |
| 1 | +## WiCS Undergrad Intro To Git and Open Source Workshop |
2 | 2 |
|
3 | | -The site is generates static content from Markdown articles, using software |
4 | | -called [Pelican](http://docs.getpelican.com/en/3.5.0/). |
| 3 | +Hello! You have found yourself in the repository for the WiCS Undergrad |
| 4 | +Committee’s Git Workshop. To get started with the curriculum, navigate to |
| 5 | +the [wiki tab](https://github.com/wics-uw/git-workshop-W16/wiki). |
5 | 6 |
|
6 | | -These docs are aimed at a Debian-based Linux user. |
7 | | - |
8 | | -## Installation ## |
9 | | - |
10 | | -### `git` ### |
11 | | - |
12 | | -`git` is the source control that we use to manage changes to the website. It |
13 | | -comes preinstalled on most Linux systems. If you don't already have it, just |
14 | | -run |
15 | | - |
16 | | -``` |
17 | | -sudo apt-get install git-core |
18 | | -``` |
19 | | - |
20 | | -For more information about what a typical `git` workflow for contributing to |
21 | | -the site might look like, check out [this OpenHatch |
22 | | -document](http://openhatch.readthedocs.org/en/latest/advanced/working_with_git.html) |
23 | | -and look into completing the [OpenHatch `git` training |
24 | | -mission](http://openhatch.org/missions/git). |
25 | | - |
26 | | -### `pelican` ### |
27 | | - |
28 | | -The easiest way to install Pelican is to create a `virtualenv`. To do so, |
29 | | -first ensure that `virtualenv` is installed: |
30 | | - |
31 | | -``` |
32 | | -sudo apt-get install python-virtualenv |
33 | | -``` |
34 | | - |
35 | | -Now you can create a `virtualenv`: |
36 | | - |
37 | | -``` |
38 | | -mkdir -p ~/virtualenvs/pelican |
39 | | -cd ~/virtualenvs/pelican |
40 | | -virtualenv . |
41 | | -source bin/activate |
42 | | -``` |
43 | | - |
44 | | -Your shell prompt will change slightly, like this: |
45 | | - |
46 | | -``` |
47 | | -user@honk ~/virtualenvs/pelican $ source bin/activate |
48 | | -(pelican)user@honk ~/virtualenvs/pelican $ |
49 | | -``` |
50 | | - |
51 | | -Now you can install Pelican by typing |
52 | | - |
53 | | -``` |
54 | | -pip install pelican markdown |
55 | | -``` |
56 | | - |
57 | | -If you ever need to re-enable the `virtualenv`, simply run |
58 | | - |
59 | | -``` |
60 | | -source ~/virtualenvs/pelican/bin/activate |
61 | | -``` |
62 | | - |
63 | | -## Setup ## |
64 | | - |
65 | | -Before you get started with development, we're going to walk through some setup |
66 | | -steps. |
67 | | - |
68 | | -### Cloning your repository ### |
69 | | - |
70 | | -Only complete this step once! |
71 | | - |
72 | | -You'll need to fork a copy of this repo in order to contribute. To do so, click |
73 | | -the "Fork" button in the upper right hand corner. |
74 | | - |
75 | | -One the project is forked, you'll be taken to your very own local copy of the |
76 | | -WiCS website, perhaps at `https://github.com/<your-username>/website`. This is |
77 | | -your personal remote repository on GitHub, or what we'll call `origin`. |
78 | | - |
79 | | -Next, you'll need a folder to store the code in. On Linux, use the command line |
80 | | -to create a new directory and navigate there (`mkdir /path/to/code` and `cd |
81 | | -/path/to/code`). On Windows, you can make a folder in Windows Explorer, and |
82 | | -since you have git installed, right click and select "Open Git Bash Here" to |
83 | | -launch a terminal. |
84 | | - |
85 | | -Now you can clone your code: |
86 | | - |
87 | | -``` |
88 | | -git clone https://github.com/<your-username>/website.git |
89 | | -``` |
90 | | - |
91 | | -which will create a folder called `website`. This is your git repository! In |
92 | | -both git bash or your Linux terminal, `cd website`. |
93 | | - |
94 | | -Now we need to add a reference to our upstream remote repository: |
95 | | - |
96 | | -``` |
97 | | -git remote add upstream https://github.com/wics-uw/website.git |
98 | | -``` |
99 | | - |
100 | | -### Feature development ### |
101 | | - |
102 | | -In git, when we are working on a feature, we usually split it off from the |
103 | | -master branch and refer to this branch as a "feature" or "topic branch." |
104 | | - |
105 | | -If you're ready to work on a topic branch, follow these easy steps. First, |
106 | | -ensure your master branch is up to date: |
107 | | - |
108 | | -``` |
109 | | -git checkout master # Check out your master branch |
110 | | -git fetch upstream # Fetch any new upstream code |
111 | | -git rebase upstream/master # Rebase your master branch to match upstream |
112 | | -git push origin master # Update your remote `origin` repository |
113 | | -``` |
114 | | - |
115 | | -Now you can make a new topic branch off master: |
116 | | - |
117 | | -``` |
118 | | -git checkout -b topic-name # Equivalent to git branch topic-name then checkout |
119 | | -``` |
120 | | - |
121 | | -### Commit structure ### |
122 | | - |
123 | | -Here are some tips for structuring your commits. These are generally considered |
124 | | -best practices. |
125 | | - |
126 | | -+ Use present-tense, imperative commit messages. |
127 | | - + **DON'T** write "This fixes issue #234 by optimizing the algorithm" |
128 | | - + **DO** write "Optimizes algorithm; fixes #234" |
129 | | -+ Write descriptive commit messages that give the reviewer the big picture |
130 | | - + **DON'T** write "Updates in css files"; this is redundant and can be |
131 | | - determined by viewing the files the patch modifies |
132 | | - + **DO** feel free to write multi-line commit messages; keep in mind that |
133 | | - while only the first line is visible in summary view, additional comments |
134 | | - below go into the git log and can be very useful |
135 | | -+ Separate commits in the smallest logical, reversible steps possible. |
136 | | - + **DON'T** submit multiple small commits fixing typos; rebase these into a |
137 | | - single commit |
138 | | - + **DO** include whitespace updates in a separate commit from code changes, |
139 | | - template changes separate from adding content, etc. |
140 | | -+ Ask for help if you're not sure how to do some of these things! |
141 | | - |
142 | | -Remember: code reviews will help catch these things and give you a better idea |
143 | | -of what's considered standard. Don't fear constructive feedback! |
144 | | - |
145 | | -### Submitting pull requests ### |
146 | | - |
147 | | -After you've made your modifications on your topic branch, perhaps following |
148 | | -the guide in the **Development** section, you can now ask for your code to be |
149 | | -merged by submitting a pull request. |
150 | | - |
151 | | -To do so, first push your code to your personal remote, `origin`: |
152 | | - |
153 | | -``` |
154 | | -git push origin topic-name |
155 | | -``` |
156 | | - |
157 | | -Then log onto GitHub. You'll find a big green button asking if you want to |
158 | | -submit a pull request. Click it and follow the steps to submit your pull |
159 | | -request. |
160 | | - |
161 | | -Once it's merged, you can click the "Delete branch" button on GitHub. In your |
162 | | -local repository, the branch can be deleted with the |
163 | | - |
164 | | -``` |
165 | | -git branch -d topic-name |
166 | | -``` |
167 | | - |
168 | | -command. |
169 | | - |
170 | | -### Reviewing a pull request ### |
171 | | - |
172 | | -There are three views for reviewing a pull request on GitHub: **Conversation**, |
173 | | -**Commits**, and **Files changed**. |
174 | | - |
175 | | -#### Conversation #### |
176 | | - |
177 | | -Comments on the pull request show up here, including any inline comments that |
178 | | -are added when viewing the file diffs. A summary of submitted commits is also |
179 | | -listed. |
180 | | - |
181 | | -Use this section to submit general feedback about the pull request. |
182 | | - |
183 | | -#### Commits #### |
184 | | - |
185 | | -A more detailed list of commits included in the pull request, that will allow a |
186 | | -reviewer to view each individually. |
187 | | - |
188 | | -#### Files changed #### |
189 | | - |
190 | | -The `diff` view of the pull request. Lets the reviewer see the full patch in |
191 | | -its entirety, and add inline comments on changes. |
192 | | - |
193 | | -Use this section to submit line-specific feedback. |
194 | | - |
195 | | -#### Merging #### |
196 | | - |
197 | | -A back-and-forth revision process will occur during the course of the review. |
198 | | -For the developer to update the pull request, they simply need to push new |
199 | | -changes to the topic branch being considered (sometimes using a force-push if |
200 | | -they need to rewrite commits). |
201 | | - |
202 | | -When all parties are happy with the patch, the reviewer can then sign off and |
203 | | -merge the code by clicking the big green "Merge" button. This code is then |
204 | | -merged into the upstream master branch. For the changes to appear on the |
205 | | -website, someone needs to deploy the new code (see the **Deployment** section |
206 | | -for more details). |
207 | | - |
208 | | -## Development ## |
209 | | - |
210 | | -You can either add content to the site or modify its theme. |
211 | | - |
212 | | -### Adding site content ### |
213 | | - |
214 | | -All site content is contained in the `content/` directory. Posts are sorted by |
215 | | -term directories, e.g. "F2014". There is also a `pages/` directory that |
216 | | -contains non-post type pages, such as contact info, about us, etc. |
217 | | - |
218 | | -#### Posts #### |
219 | | - |
220 | | -We currently use three posting categories: **Blog**, **Events**, and **Media**. |
221 | | - |
222 | | -+ Use the **Media** category for video recordings of talks and events. |
223 | | -+ Use the **Events** category to advertise event details. |
224 | | -+ Use the **Blog** category for everything else: news, essays, etc. |
225 | | - |
226 | | -You can also tag posts! Try to use tags that have already been used on the |
227 | | -other posts, but feel free to add new tags as necessary. |
228 | | - |
229 | | -Please try to use a consistent naming scheme. Articles are named by term, |
230 | | -category, and slug; for instance, posting a video of a talk about automata in |
231 | | -S13 might be named `S13-media-automata.md`. |
232 | | - |
233 | | -#### Pages #### |
234 | | - |
235 | | -We only need a limited number of pages. You probably won't need to add many |
236 | | -more. These include things like our Code of Conduct, contact info, etc. |
237 | | - |
238 | | -It might be useful to add a page that doesn't show up in the site navigation. |
239 | | -To do so, make sure you set `Status: hidden` in the Markdown preamble. This |
240 | | -will cause the page to be generated without showing up in the site's main |
241 | | -navigation. |
242 | | - |
243 | | -### Markup beautification ### |
244 | | - |
245 | | -The theme we are currently using is called `notmyidea`. Pelican uses the |
246 | | -[jinja2](http://jinja.pocoo.org/docs/dev/) templating system; if you've used |
247 | | -Django, you'll find the templates very similar. |
248 | | - |
249 | | -To modify the theme css or html, simply take a look at the theme data under |
250 | | -`theme/notmyidea/` and modify it at will. |
251 | | - |
252 | | -### Testing ### |
253 | | - |
254 | | -To test a local copy of the site, you'll need to start the development server. |
255 | | -There's no additional software you need to install to launch a local version of |
256 | | -the site! Simply run |
257 | | - |
258 | | -``` |
259 | | -./develop_server.sh start |
260 | | -``` |
261 | | - |
262 | | -in the top directory, which will launch the development server on port 8000. |
263 | | -Then you can navigate to the local site by visiting http://localhost:8000 in |
264 | | -your browser. This script will conveniently regenerate the site every time you |
265 | | -make a change to a file, so you won't need to rerun this command. |
266 | | - |
267 | | -To shut down the development server, use |
268 | | - |
269 | | -``` |
270 | | -./develop_server stop |
271 | | -``` |
272 | | - |
273 | | -## Deployment ## |
274 | | - |
275 | | -We are currently using the [Computer Science |
276 | | -Club](https://csclub.uwaterloo.ca)'s ["club |
277 | | -hosting"](http://wiki.csclub.uwaterloo.ca/Club_Hosting) as our webhost. You |
278 | | -must have a CSC login in the `wics` group to complete the next steps. |
279 | | - |
280 | | -To deploy the site, first log into the CSC's webserver: |
281 | | - |
282 | | -``` |
283 | | - |
284 | | -``` |
285 | | - |
286 | | -Then use `become_club` to switch to the WiCS user account: |
287 | | - |
288 | | -``` |
289 | | -become_club wics |
290 | | -``` |
291 | | - |
292 | | -Pull the latest version of the site from GitHub: |
293 | | - |
294 | | -``` |
295 | | -cd ~/pelican |
296 | | -git pull |
297 | | -``` |
298 | | - |
299 | | -Then build and deploy the site: |
300 | | - |
301 | | -``` |
302 | | -source ~/virtualenvs/pelican/bin/activate |
303 | | -make rsync_upload |
304 | | -``` |
305 | | - |
306 | | -Which conveniently deploys the site into the `wics` user's `www/` directory. |
| 7 | +The Winter 2016 iteration of this workshop is being held in STC 0050, on |
| 8 | +Tuesday, March 15th at 5:30pm. |
0 commit comments