Informations préalables
Pour ce tuto voici la configuration que j’ai :
Prérequis
Vous devez avoir d’installé :
Pour pouvoir utilisé Octopress vous devez OBLIGATOIREMENT connaitre et savoir utiliser :
GIT
SASS et Compass
Les lignes de commandes
Conventions utilisées dans cet article :
$ désigne une entrée dans la console, vous ne devez PAS taper le symbole $ lorsque vous entrer du code !
Début du tuto :
Ouvrer la console, mettez-vous sur le chemin où vous voulez créer octopress, je tiens à préciser que le dossier octopress sera crée lors de la copie du dépot git, inutile de le créer.
par exemple si vous voulez créer octopress dans c:\octopress, taper dans la console :
Si vous voulez créer octopress dans Mes documents :
1
$ cd C:\Users\Anthony\Documents
Bien entendu remplacer Anthony par votre Nom :p
Pour les besoin de ce tuto, je créerait le dossier octopress_tuto directement à la racine de C, donc cela donnera :
1
2
$ cd c:\
$ git clone https://github.com/imathis/octopress.git octopress_tuto
Nous devons ensuite installer les dépendances d’Octopress, c’est-à-dire les autres gem ruby dont il a besoin pour fonctionner :
puis :
Voilà nous avons la base d’octopress et ses dépendances d’installés, vous pouvez voir ci-dessous l’arborescence ainsi créée dans c:\octopress_tuto
Arborescence d’octopress après installation 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
| .gitignore
| .powrc
| .rbenv-version
| .rvmrc
| .slugignore
| CHANGELOG.markdown
| config.rb
| config.ru
| Gemfile
| Gemfile.lock
| infos.txt
| Rakefile
| README.markdown
| _config.yml
|
+---.themes
| +---classic
| +---sass
| | | screen.scss
| | | _base.scss
| | | _partials.scss
| | |
| | +---base
| | | _layout.scss
| | | _solarized.scss
| | | _theme.scss
| | | _typography.scss
| | | _utilities.scss
| | |
| | +---custom
| | | _colors.scss
| | | _fonts.scss
| | | _layout.scss
| | | _styles.scss
| | |
| | +---partials
| | | _archive.scss
| | | _blog.scss
| | | _footer.scss
| | | _header.scss
| | | _navigation.scss
| | | _sharing.scss
| | | _sidebar.scss
| | | _syntax.scss
| | |
| | +---sidebar
| | _base.scss
| | _delicious.scss
| | _googleplus.scss
| | _pinboard.scss
| | _twitter.scss
| |
| +---source
| | atom.xml
| | favicon.png
| | index.html
| |
| +---assets
| | +---jwplayer
| | | player.swf
| | |
| | +---glow
| | | glow.xml
| | |
| | +---controlbar
| | | background.png
| | | blankButton.png
| | | divider.png
| | | fullscreenButton.png
| | | fullscreenButtonOver.png
| | | muteButton.png
| | | muteButtonOver.png
| | | normalscreenButton.png
| | | normalscreenButtonOver.png
| | | pauseButton.png
| | | pauseButtonOver.png
| | | playButton.png
| | | playButtonOver.png
| | | timeSliderBuffer.png
| | | timeSliderCapLeft.png
| | | timeSliderCapRight.png
| | | timeSliderProgress.png
| | | timeSliderRail.png
| | | unmuteButton.png
| | | unmuteButtonOver.png
| | |
| | +---display
| | | background.png
| | | bufferIcon.png
| | | muteIcon.png
| | | playIcon.png
| | |
| | +---dock
| | | button.png
| | |
| | +---playlist
| | | item.png
| | | itemOver.png
| | | sliderCapBottom.png
| | | sliderCapTop.png
| | | sliderRail.png
| | | sliderThumb.png
| | |
| | +---sharing
| | embedIcon.png
| | embedScreen.png
| | shareIcon.png
| | shareScreen.png
| |
| +---blog
| | +---archives
| | index.html
| |
| +---images
| | bird_32_gray.png
| | bird_32_gray_fail.png
| | code_bg.png
| | dotted-border.png
| | email.png
| | line-tile.png
| | noise.png
| | rss.png
| | search.png
| |
| +---javascripts
| | | ender.js
| | | github.js
| | | modernizr-2.0.js
| | | octopress.js
| | | pinboard.js
| | | twitter.js
| | |
| | +---libs
| | ender.js
| | jXHR.js
| | swfobject-dynamic.js
| |
| +---_includes
| | | after_footer.html
| | | archive_post.html
| | | article.html
| | | disqus.html
| | | facebook_like.html
| | | footer.html
| | | google_analytics.html
| | | google_plus_one.html
| | | head.html
| | | header.html
| | | navigation.html
| | | twitter_sharing.html
| | |
| | +---asides
| | | delicious.html
| | | github.html
| | | googleplus.html
| | | pinboard.html
| | | recent_posts.html
| | | twitter.html
| | |
| | +---custom
| | | | after_footer.html
| | | | category_feed.xml
| | | | footer.html
| | | | head.html
| | | | header.html
| | | | navigation.html
| | | |
| | | +---asides
| | | about.html
| | |
| | +---post
| | author.html
| | categories.html
| | date.html
| | disqus_thread.html
| | sharing.html
| |
| +---_layouts
| category_index.html
| default.html
| page.html
| post.html
|
+---plugins
backtick_code_block.rb
blockquote.rb
category_generator.rb
code_block.rb
date.rb
gist_tag.rb
haml.rb
image_tag.rb
include_array.rb
include_code.rb
jsfiddle.rb
octopress_filters.rb
pagination.rb
post_filters.rb
preview_unpublished.rb
pullquote.rb
pygments_code.rb
raw.rb
render_partial.rb
rubypants.rb
sitemap_generator.rb
titlecase.rb
video_tag.rb
Nous allons maintenant créer notre thème rendez-vous dans le prochain article