Tutorial¶
Table of Contents
Note
We’ll soon put up more detailed tutorials. For the time being, please go through the following and reach out for any queries at ballaneypranav@gmail.com.
Uploading a Test Folder¶
If you’d like to test the functionality first, make a test folder with just a few files and try to upload that. The following example demonstrates that in more detail.
#1 Start with the following directory structure:
wiki/
src/
WS-basic/
index.html # homepage
css/
style.css # custom styles
igem-reset.css # Resets styles that iGEM injects
js/
main.js # custom JS + iGEM reset
assets/ # everything else must be in the assets folder
img/
logo.jpg
background.jpg
Description/
index.html # Description page
build/
# this will be filled by WikiSync
wikisync.py
The source code is inside wiki/src/WS-basic/
instead of just wiki/src/
so that any existing content on your wiki is not affected.
Please download a zipped version of this code here.
#2 Let’s look at individual files now:
src/WS-basic/index.html
:
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 | <html lang="en">
<head>
<title>Testing iGEM WikiSync</title>
<link rel="stylesheet" href="css/igem-reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>iGEM Example Wiki</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="./Description/">Description</a></li>
</ul>
<div class="container">
<br><br>
<img src="./assets/img/logo.png" alt="iGEM Logo" height=200 width=200>
<br><br>
<h1>Welcome to iGEM 2020!</h1>
<p>This is a sample page, designed for a demonstration for iGEM WikiSync.</p>
</div>
<script src="./js/main.js"></script>
</body>
</html>
|
src/WS-basic/css/style.css
:
1 2 3 4 | body {
background-color: #f7feff;
background-image: url(../assets/img/background.png);
}
|
#3 Create ``wikisync.py``:
import igem_wikisync as sync
sync.run(
team='your_team_name',
src_dir='source_directory' # folder where your wiki is stored
build_dir='build_directory' # folder where WikiSync will temporarily store your wiki before uploading
)
#4 Export your credentials as environment variables:
On Windows:
set IGEM_USERNAME=youriGEMusername set IGEM_PASSWORD=youriGEMpassword
You can verify by running:
echo %IGEM_USERNAME%
On Mac or Linux:
export IGEM_USERNAME=youriGEMusername export IGEM_PASSWORD=youriGEMpassword
You can verify by running:
echo $IGEM_USERNAME
#5 Run wikisync.py
:
python3 wikisync.py
You should now see the following output:
> python3 wikisync.py
Done! Successfully uploaded:
2 assets
2 HTML files
2 stylesheets
1 JS scripts
Please look at the log for more details.
#6 Let’s look at the files WikiSync has written in build/
now:
build/WS-basic/index.html
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html lang="en"><head>
<title>Testing iGEM WikiSync</title>
<link href="https://2020.igem.org/Template:BITSPilani-Goa_India/Test/css/igem-resetCSS?action=raw&ctype=text/css" rel="stylesheet"/>
<link href="https://2020.igem.org/Template:BITSPilani-Goa_India/Test/css/styleCSS?action=raw&ctype=text/css" rel="stylesheet"/>
</head>
<body>
<h1>iGEM Example Wiki</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://2020.igem.org/Team:BITSPilani-Goa_India/Test/Description">Description</a></li>
</ul>
<div class="container">
<br/><br/>
<img alt="iGEM Logo" height="200" src="https://2020.igem.org/wiki/images/5/5a/T--BITSPilani-Goa_India--assets--img--logo.png" width="200"/>
<br/><br/>
<h1>Welcome to iGEM 2020!</h1>
<p>This is a sample page, designed for a demonstration for iGEM WikiSync.</p>
</div>
<script src="https://2020.igem.org/Template:BITSPilani-Goa_India/Test/js/mainJS?action=raw&ctype=text/javascript"></script>
</body></html>
|
build/WS-basic/css/style.css
:
1 2 3 4 | body {
background-color: #f7feff;
background-image: url(https://2020.igem.org/wiki/images/d/dc/T--BITSPilani-Goa_India--assets--img--background.png);
}
|
There are a few things to note here:
All the files have been uploaded and their URLs substituted in the code.
The filenames have been changed according to iGEM specification.
HTML files have been uploaded at
igem.org/Team:
but CSS and JS files have been uploaded atigem.org/Template:
, and appended with the required URL parameters.A file called
upload_map.yml
should have appeared in your directory. Read more about it the section about Keeping Track of Changes.A file called
wikisync.cookies
should have appeared in your directory. Read more about in the section about Maintaining a Session and make sure you add it to your.gitignore
.A file called
wikisync.log
should have appeared in your directory. Read more about it in the section about Logging.
Note
We’re working on some more tutorials. They will be up soon.
Continuous Deployment with Travis¶
Travis: https://www.youtube.com/watch?v=g0KsiCj3CgQ&t=1s
You’ll also need to add GITHUB_USERNAME
, IGEM_USERNAME
and IGEM_PASSWORD
along with GITHUB_TOKEN
as environment variables on Travis. We will have more details on the process up here soon.
Please read the Continuous Integration section in the Usage Guide for now. We will have this tutorial up soon.