To do list:
Individual
- Plan and sketch a potential final project
- Work through a git tutorial
- Build a personal site in the class archive describing you and your final project
Week 1 "hero shot":
Figure 0: Personal site home page
0 Agreement
**Fab Academy Student Agreement**
*The Fab Academy is responsible for:*
- Teaching principles and practices of digital fabrication
- Arranging lectures, recitations, meetings, and events for the class
- Evaluating and providing feedback on student work
- Offering clear standards for completing assignments
- Certifying and archiving student progress
- Supervising class preparation
- Reviewing prospective students, instructors, and labs
- Providing central staff and infrastructure for students, instructors, and labs
- Fund-raising for costs not covered by student tuition
- Managing and reporting on the program's finances, results, and impacts
- Publicizing the program
- Promoting a respectful environment free of harassment and discrimination
*I am a Fab Academy student, responsible for:*
- Attending class lectures and participating in reviews
- Developing and documenting projects assigned to introduce and demonstrate skills
- Honestly reporting on my work, and appropriately attributing the work of others
- Working safely
- Leaving workspaces in the same (or better) condition than I found them
- Participating in the upkeep of my lab
- Ensuring that my tuition to cover local and central class costs is covered
- Promoting a respectful environment free of harassment and discrimination
Signed by committing this file in my repository,
Léon Reboul
1 How to manage a project with Gitlab
In this section we will go trough a step by step tutorial on how to use Gitlab for project management.
1.1 Register to Gitlab
Step 1
Using your favorite web browser, go to
Gitlab Home page, you should arrive to a web page similar to the one in figure
1.
Figure 1: Gitlab Home Page
Step 2
In top right corner of the home page click on “Register”, you should arrive to a web page similar to the one in figure
2.
Figure 2: Gitlab Register Page
Step 3
Enter your First name, Last name,
Username, email, and password.
Read the
Terms of Service and Privacy Policy and then accept them. Click on the CAPTCHA checker and then on Register.
You should arrive to a web page similar to the one in figure
3.
Figure 3: Gitlab Profile page
Figure 4: Gitlab Profile page
Step 4
Choose one role from the role menu and answer the question “who will be using Gitlab”, then click the “Get Started!” button.
You should arrive to a web page similar to the one in figure
4.
Figure 5: Gitlab project dashboard
Step 5
To confirm your account, go to the email you used in figure
2, open “Confirmation instructions” from gitlab@mg.gitlab.com and then click on “Confirm your account”.
1.2 Create a new project
Step 1
On the web page similar to the one in figure
4, click on create project. You should arrive to a web page similar to the one in figure
4. .
Figure 6: Gitlab new project
Step 2
Give your project a name, a description, and a visibility level.
You should not tick the “Initialize repository with README.md” if you want to push and existing repository (like a static HTML website) and tick it otherwise.
1.3 Add an SSH Key to your profile
Step 1
In the top right window, click on your avatar, in the menu click on Settings as shown in figure .
Figure 7: Gitlab profile menu
Step 2
Then click on SSH Key, you should arrive to a web page similar to the one in figure
7.
Figure 8: Gitlab SSH key
1.4 Upload files to the archive
Step 1
In a terminal, cd to your project location as shown in figure
9
Step 2
Type "git add -A" to add all new contents to the archive, as shown in figure
9
Step 3
Type "git commit -m "Type your relevant and self-explanatory message here" to commit the new contents to the archive with the message, as shown in figure
9
Step 3
Type "git push" to push the new contents to the archive, as shown in figure
9
Figure 9: Steps to upload files to the archive
2 How to build a personal website
2.1 Follow an online tutorial
I have tried several websites and I particularly like the tutorials of:
- follow a progressive lesson
- test html and css code online in their simulator with real time rendering.
Figure and shows example of codecademy and w3schools simulators.
2.1.1 On how to create a website with your own .html and .css files
I have tried and appreciated the following tutorials:
2.1.2 On how to create a website using bootstrap
I have tried and appreciated the following tutorials:
On how to create a website with an other way
I am pretty sure that if you ask your navigator nicely, it will lead you to a tutorial on the topic of your choice.
2.2 Personal choice for Fab Academy 2020
To be able to have full control on my website looks and content, I am using .html and .css file.
To speed up the process of creating and modifying .html and .css file I will use:
- Lyx to automatically produce .xhtml and .css files. This allow me to focus on the content rather than the looks.
- Atom to make minor modification to already created .xhtml and .css files. By modifying
3 How to use Lyx as an .html or .xhtml files generator
3.1 First what is Lyx?
One simple way to describe Lyx is to cite their homepage
homepage:
“Lyx is a document processor that encourages an approach to writing based on the structure of your documents (WYSIWYM) and not simply their appearance (WYSIWYG).
LyX combines the power and flexibility of TeX/LaTeX with the ease of use of a graphical interface”.
3.2 Why you may want to use Lyx to process documents?
Because it has a lot of strong advantages:
- LyX is released under a Free Software/Open Source license
- Lyx runs on Linux/Unix, Windows, and Mac OS X
- Lyx is available in several languages
- Lyx allows you to use math macros
- Lyx has preview box for tikz
- Lyx natively supports svg
- Lyx can export to a wide range of format:
- PDF
- XHTML
- Beamer that you can modify collaboratively online with Overleaf
- A lot more (check the export sub menu “More Format & options” in “Export”
- Lyx allows you to preview your document in the format you choose
- Lyx has a lot of shortcutsshortcuts than you can customize
- Lyx has built in documentation with numerous tutorials in the “Help” menu (shortcut: ALT +H)
- Lyx has a built in spellchecker (crucial option for me)
3.3 How to export from .lyx file to .html or .xhtml file
Step 1
In your .lyx file open the “File” menu, then select “Export” then “HTML” or “LyxHTML”. Click and it is done!
Step 1 alternative
In your .lyx, you can use the shortcut:
COVID UPDATE
As the FabLab have been closed for almost 3 months and the time is running out, I use directly Atom to write my documentation.
One major drawback with Lyx is that due to a bug I was forced to manually rename every picture in the .html.
I am pretty sure it is possible to fix this bug with some hack, but I can afford to do it now.
Atom to website pages
Step 0
Modify the yml file on gitlab as follows:
# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html
pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
only:
- master
Step 1
Write html or xhtml code in Atom as shown in figure 10.
Figure 10: Exeample of an Atom file
Step 2
Save the file.
Step 3
Upload the file to the archive as shown in section
1.4 Upload files to the archive
Step 4
Wait for Gitlab to finish the deploy job. You can check the progress on Gitlan CI/CD page as shown in figure 11.
Figure 11: Gitlab CI/CD page
References
1Keane, Andrew J and Sóbester, András and Scanlan, James P, Small Unmanned Fixed-wing Aircraft Design: A Practical Approach (John Wiley & Sons, 2017).
2Wich, Serge A and Koh, Lian Pin, Conservation drones: mapping and monitoring biodiversity (Oxford University Press, 2018).