Slides from the BostonEErs free all-day workshop in December 2010.

1. Build an EE Site
BostonEErs workshop
Saturday 12/4/2010
1

2. Howdy!
Ruthie ‘Danger’ BenDor
unruthless.com
Marc ‘High Five’ Amos
bostonwebstudio.com
~ with special thanks to ~
Andrew ‘Too Cool For A Photo’ Rodgers
openpixels.com
2

3. Thanks!
3

4. The Plan!
• Get Acquainted With ExpressionEngine
• Install ExpressionEngine
• Break
• Model & Import Your Site Content
• Lunch
• Display Your Site Content
• Break
• System Tweaks & Tips
• Wrapup
4

5. Let’s begin.
5

6. Get acquainted
with EE.
6

7. ExpressionWhat?
• ExpressionEngine is an awesome content
management system for websites.
• SELF-HOSTED, not software-as-a-service.
• WEB-ADMINISTERED. All you need’s a browser.
• Written in PHP, runs on MySQL.
• Commercial product from EllisLab.
• Latest version is 2.1.1.
7

8. GoodForWhat?
• ExpressionEngine runs all kinds of sites.
• It’s great for ...
• sites with complex content,
• sites run by non-technical content editors,
• membership sites,
• and more.
8

9. 9

10. Install
ExpressionEngine.
10

11. Step 1:
Go get EE.
11

12. 12

13. Step 2:
Gather server info.
13

14. 14

15. Step 3:
Run server wizard.
15

16. • Before you install EE, make sure your web host
can handle it:
1. Download the server wizard from
http://expressionengine.com/files/ee_server_wizard.zip
2. Unzip and upload the ee_wizard folder to your
web server.
3. Go to http://yourdomain.com/ee_wizard and fill out
the form.
16

17. Step 4:
Upload EE files to
web server.
17

18. Step 5:
Make some
security tweaks.
18

19. • At a minimum, rename the ‘system’ folder
something less easily guessable. (NOT ‘admin’,
‘controlpanel’, ‘login’, etc.) Then open
index.php and update $system_path.
• Better option is to move the ‘system’ folder
entirely outside the web root. Details here:
http://expressionengine.com/user_guide/
general/system_above_webroot.html
19

20. Step 6:
Adjust file and
folder permissions.
20

21. • CHMOD the following files to 666:
• /system/expressionengine/config/config.php
• /system/expressionengine/config/database.php
• CHMOD the following folders to 777:
• /system/expressionengine/cache/
• /images/avatars/uploads/
• /images/captchas/
• /images/member_photos/
• /images/pm_attachments/
• /images/signature_attachments/
• /images/uploads/
21

22. Step 7:
Run installation
wizard.
22

23. • Go to http://yoursite.com/system/ and the
installation wizard will automatically start.
• Follow the instructions on the screen.
23

24. Bookmark these links!
24

25. Step 8:
Remove installer
folder.
25

26. Step 9:
Log into the
control panel.
26

27. Step 10:
Dance Party.
27

28. Breaktime.
Caffeine.
28

29. The Plan!
• Get Acquainted With ExpressionEngine
• Install ExpressionEngine
• Break
• Model & Import Your Site Content
• Lunch
• Display Your Site Content
• Break
• System Tweaks & Tips
• Wrapup
29

30. Model Your
Site Content.
30

31. 31

32. Step 0:
What are we
building here?
32

33. 33

34. Step 1:
Figure out what
types of content
your site has.
34

35. 35

36. 36

37. These are your
channels. Each
individual piece of
content is an entry.
37

38. Each entry in a
particular channel
has the same
format - the same
custom fields.
38

39. Step 3:
Plan, then build
your channels and
custom fields.
39

40. Excel is your friend.
40

41. Native fieldtypes
41

42. Custom
fieldtypes
42

43. Step 4:
Give uploaded files
a place to go:
File Upload Directories.
43

44. Step 5:
Categorize your
content with, well:
Categories.
44

45. Step 6:
Control which
entries get
published with
Custom Statuses.
45

46. Lunch.
Dibs on the caprese.
46

47. The Plan!
• Get Acquainted With ExpressionEngine
• Install ExpressionEngine
• Break
• Model & Import Your Site Content
• Lunch
• Display Your Site Content
• Break
• System Tweaks & Tips
• Wrapup
47

48. Display Your
Site Content.
48

49. Demo:
static mockups
49

50. Demo:
Template Manager
50

51. Demo:
Template Groups
51

52. Demo:
Create Templates
52

53. Demo:
Populate
templates
53

54. Demo:
Handle CSS and JS
54

55. Demo:
Add EE Tags
55

56. Demo:
Plugins
56

57. Demo:
Snippets
57

58. Demo:
Global variables
58

59. Breaktime.
Stretch.
59

60. The Plan!
• Get Acquainted With ExpressionEngine
• Install ExpressionEngine
• Break
• Model & Import Your Site Content
• Lunch
• Display Your Site Content
• Break
• System Tweaks & Tips
• Wrapup
60

61. Performance
Tweaks
61

62. the disable=""
parameter
62

63. caching
63

64. .htaccess
64

65. minify CSS and JS
65

66. Throttling
66

67. Control Panel User
Interface Tweaks
67

68. Customize the
Publish page
68

69. Accessories
69

70. Done for today.
But there’s a lot more to cover.
Sadly, we’ll have to save membership, e-commerce,
search, and other nifty EE features for another time.
Hopefully this was enough to get you started.
70

71. Awesome sponsors.
71

72. It’s been real.
Ruthie ‘Danger’ BenDor
unruthless.com
Marc ‘High Five’ Amos
bostonwebstudio.com
~ with special thanks to ~
Andrew ‘Too Cool For A Photo’ Rodgers
openpixels.com
72

73. bostonEErs.org
73